When a visitor clicks on a button or link on your website, they expect to see some kind of feedback. This animation or notification lets the user know that their request has been received and that the site is loading relevant information.
But, if nothing happens, most will conclude that the link is broken or something is wrong with your site. They'll quickly navigate away before they realize your site has been processing their request.
To prevent these types of bounces, you need to program a loading animation into your buttons and links. A loader lets people know that their request has been received and is being attended to. This is a fundamental component of user experience (UX) design and without it, visitors will get frustrated and bounce from your site, never to return.
If your website doesn't have loaders, you can create this animation using CSS. In this post, we'll explain how you can do that, and provide some examples that your team can use as inspiration.
What is a loading animation?
Loading animations are notifications that reassure users that the system is still handling their request. When a user clicks on a link or button, the animation is displayed until the load process is complete.
Some animations have progress bars that indicate how long it will take for data or content to load. This gives users a real-time update — or distraction — that makes waiting more bearable.
There are many different tools that can build loading animations. However, one of the most practical ones is CSS. Let's explore why in the section below.
CSS for Loading Animations
However, CSS has some strengths that make it a practical solution for this purpose:
It's easy to edit. You can quickly adjust the duration, color, speed, and other animation elements.
It doesn't lose quality when it changes scale.
Animations are fast and smooth with graphics processing unit (GPU) acceleration (faster than JS).
It's possible to pause with the animation-play-state property.
CSS loading animations may not be supported by some browsers, such as Internet Explorer 9 and Opera Mini. If you're not sure if it's supported, tools like Modernizr can tell you if they are. For browsers that don't support CSS loading animations, you can use a GIF instead.
Now that we've explained when you should use CSS (and when you shouldn't), let's look at some loading animations that were built using this coding language.
Examples of CSS Loading Animations
There are a variety of loading animations you can create with CSS. Here are the five most common.
1. Infinite Loading Animation
Infinite loading animations ask the user to wait without indicating how long. They can be used when the waiting time is unknown or very short.
Determine loading animations indicate how long it will take for the page to load. These may offer a specific percentage or number, but do not have to. They can also be visual estimates like a circle being drawn or bar filling up.
Spinners are a common type of infinite loading animation. These indicate that the page is loading with an animation moving along a circular track. The animation will continue on this circular track until the page is loaded.
In the example, the "border" property defines the size and color of the loader's border. The border-radius property makes the loader a circle.
The blue "ribbon" spinning inside the border is defined by the "border-top" property. If you want to add more spinning ribbons, you can include "border-bottom," "border-right," and "border-left" properties.
The "width" and "height" properties define the size of the loading animation.
Lastly, the "animation" property makes the spinner start and continue indefinitely at a speed of 2 seconds.
And that's it. But remember, your CSS loading animation doesn't have to be that basic. Like all things CSS, your imagination controls the possibilities.
CSS Loading Animation Best Practices
A loading animation should be carefully considered in terms of how it may impact user experience. So, consider the following tips to create an effective CSS loading animation.
1. The best loading animations take the least amount of time.
No matter how cute your spinning cat animation may look, users will grow impatient if it lasts too long. Keep your users' expectations in mind and make sure your animation takes as little time as possible. Users will appreciate a fast loading time more than a beautiful spinner.
2. Ease the pain of waiting.
If you provide the user with something interesting to look at, the wait will be less agonizing. An engaging animation will attract attention and keep the user busy.
3. Your animation is part of your brand.
While this isn't the place for a marketing campaign, it's important to keep your loader on-brand. Use your company's palette and tone of voice to remain consistent with your brand.
4. Let the user know the reason for the wait.
It's not always obvious why the user needs to wait and telling them can reduce friction during wait times. You don't have to be overly specific, instead, simple statements like, "please wait while we get you set up" or "wait a moment while we fetch your newly created document" work well.
5. Provide a wait-time estimation.
A time estimate sets expectations and helps users wait patiently. You can show this estimate as a percentage or as a visual representation of progress.
Add a CSS Loading Animation to Your Site
A CSS loading animation helps users be patient with your tool or website. It lets them know the system hasn't crashed, tells them how long a page will take to load, and maintains their attention by providing something to look at.