Working with the loading icon

The little guy that helps us decide whether we should click again, or wait it out for another 2 minutes. It's a love hate relationship with me and the loading icon. I love seeing it on a website. But I hate adding it on a website and I'm not sure why. No, scratch that. I know exactly why I hate adding it.

It's because it's not easy. Because it's a spinning circle, or a dotted line, or what have you and I have to do some extra work to get that spinning circle to appear each time I want to use it. Something along the lines of the following:

• Decide whether img/svg/css/js
• Attach a new event
• Toggle the display of said icon
• Render the control somewhere near the action?
• Or maybe dead center on a page?
• Who knows
• Do this for every action that needs it

And here's the thing. There's no wrong way to implement it. You are free to draw a line and increase its width and decrease it continuously. Or to just add an img tag and hide/show it when it needs to. You can add a library to your site and use some pre-built one. You can load it on a train or you can load it on a plane. Endless ways. And that's also part of the reason why it goes ignored many times. Just like when at a restaurant you have way too many options so you take 30 minutes to pick what you always pick. Each time you need to add a loading icon, you kind of go through the same process, and in the end choose to go without it.

And when weighing in the cost/benefit analysis on this one, I totally get it. Which is a shame really, because it is one of the more useful visual queues that websites can provide to its users. Take the following button for example.

Just click on that button and tell me how frustrated you feel. Did something happen? Nope? Exactly. But how would one know if anything did happen. The loading icon is a vital part of the online ecosystem. It reduces that stress response that the brain undoubtedly goes through when you click on "Submit Payment" and you get no response back. The loading icon saves lives, possibly.

So what can be done to help alleviate that problem? A few things. But mainly, there needs to be a standard set for it that all browsers can agree on. Take it out of the hands of 3rd party frameworks and into the browser engine. I remember not long ago when you needed a rounded corner on a div, you would have to find/make/splice 4 images and position them on each corner to give the effect. Websites that generated these for you were huge. Then the W3C decided to make it a reality and this headache of roundedness went away. I want to see the same for the loading icon.

Why can't the browser do it

Why can't we treat the loading icon in the same way that we treat an input button, or a table or any of the other dozens of standard controls. Why can't this be a reality:

<input id="submit" />
<loader for="submit" />

I'm looking at you Google. Make this happen. Then the rest will follow. Because the loading icon is not something that we deserve, but it is something that we need. Just think about the number of repeated submits that will be prevented, which in themselves cause all kinds of problems daily on websites all over the world.

Build your own

Like I'm about to do after this blog post. And then I'll blog about it, for your copy/paste pleasure. But yes, you could technically build something similar to the above yourself with just plain old JavaScript and some carefully crafted CSS classes. It would need to offer the following if it's going to be useful to anyone.

• No external files needed
• Can have multiple loaders on a page
• Automatically binds to an event
• No CSS

I'll leave that as a challenge to whoever chooses to partake in it. And if you do, feel free to send me a copy to use.

Or CSS only

Another solution which you can do now is to implement a CSS animation on an element, and then show the element when your event starts. There's still the JavaScript and such in order to toggle it on, but it removes a few of the steps off of the list. Lucky for us CSS animations have come a long way in the past few years to make this happen and it is in fact a very clean looking rotation.

Feel free to copy and paste and to use it, more importantly. It's a very standard rotation animation and you can probably tweak it in endless ways.

<style>
.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    margin:0 auto;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

<div id="loader" />

So remember, the loading icon is more than just a spinning circle that appears on 10% of all websites. It's a stress reducing visual queue that tells us all, things are going to be alright. And they will.