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.

Download Now: Free Intro Guide to HTML & CSS

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

To be clear, you could use another coding language like JavaScript (JS) or a simple animated GIF for your loader.

However, CSS has some strengths that make it a practical solution for this purpose:

  1. It's easy to edit. You can quickly adjust the duration, color, speed, and other animation elements.
  2. It doesn't lose quality when it changes scale.
  3. Animations are fast and smooth with graphics processing unit (GPU) acceleration (faster than JS).
  4. 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.

CSS infinite loading animation example

Image Source

2. Determinate Loading Animation

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. 

CSS determinate loading animation example

Image Source

3. Loading Spinner

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.

CSS infinite loading animation spinner example

Image Source

4. Progress Bar

Progress bars are a specific type of determinate loading animation. They are linear rather than circular, and tell the user how much time is remaining as a percentage, volume, or fraction. 

CSS loading animation progress bar example

Image Source

5. Skeleton Screen

Skeleton screens start as a blank page with placeholders for the content you'll see. The elements are gradually revealed until the page is fully loaded.

CSS loading animation skeleton screen example

Image Source

Now that we've seen some examples, let's learn how you can put them into action in the section below.

How to Make a Simple Loading Animation in CSS

It's easy to make a simple CSS loading animation. W3Schools shares a basic example with multiple customization options.

First, define where your CSS loading animation will physically appear within the HTML:

CSS- Loading -Animation-2

Image Source

Next, create a CSS class to customize your CSS loading animation:

CSS- Loading -Animation-1

Image Source

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.

It's incredibly easy to create a CSS loading animation. All you need is some basic web design knowledge and a little inspiration.

New Call-to-action

 css introduction

Originally published Dec 1, 2020 7:00:00 AM, updated December 01 2020


CSS Animation