CSS Loading Animations: How to Make Them + 15 Templates I Love

Download Now: Free HTML & CSS Coding Templates

When visitors click on a link or button on your website, they expect visual feedback. But if nothing happens, most will think that something is wrong. If you don't have a placeholder like a CSS loading animation, they'll click away without realizing your site was processing their request.

Loading animations can prevent these bounces and provide a better user experience by signaling people that their request has been received and is being processed.

While some website builders offer built-in animation features, you can create your own with HTML and CSS. In this post, I'll explain how to make an animation with a bit of web development knowledge. Plus, I'll give some loading animation templates I've created as inspiration for your own.

Table of Contents

• What is a loading animation?
• How to Make a Simple Loading Animation with CSS
• Examples of CSS Loading Animations
• Why use CSS for loading animations?
• CSS Loading Animation Best Practices
• Add a CSS Loading Animation to Your Site

What is a loading animation?

A loading animation is a kind of animation that indicates to users that the website or application is handling their request in their background. A loading animation reassures users that their request has been accepted and is being processed.

Loading animations may display when data is being fetched or processed, or when page content is being loaded. The animation displays until the loading process is complete.

Loading animations can take different forms, like progress bars, spinning or pulsing icons, or skeleton screens that act as visual placeholders for page content.

How to Make a Simple Loading Animation with CSS

CSS animations for loading are relatively simple to make, so let's walk through an example that you can deploy on your site right away.

How to Make a Spinning Loading Animation with CSS

Let's start with this spinner, which is actually pretty straightforward to make:

See the Pen CSS Loading Spinner Example by HubSpot (@hubspot) on CodePen.

First, I'll create a div and give it the class loader.

See the Pen Untitled by HubSpot (@hubspot) on CodePen.

Next, I'll target this div with the following CSS:

See the Pen Untitled by HubSpot (@hubspot) on CodePen.

Here's what each of these properties does:

• The margin property is set to "auto" to center the loader on the page.
• The border property defines the size, style, and color of the loader's border, which appears as the circular track that the orange ribbon moves around.
• The border-radius property set to 50% makes the loader into a circle.
• The border-top property defines the size, style, and color of the moving orange ribbon. It has the same size and style as the border - only the color is different.
• The width and height properties define the size of the loading animation (the entire circle).
• The animation property defines the name, duration, timing, and iteration account. In this example, the spinner is set to move at the same speed from start to end for 4 seconds and loop indefinitely.

Then, we have the animation's keyframes, which describe how the loader should render at a given time during the animation sequence. Make sure to use the animation name defined in the animation property (in this case, "spinner.")

Only two keyframes are defined in this example. The first occurs at 0%, or the start of the animation sequence, when the loader is configured to be rotated 0 degrees. The second keyframe occurs at 100%, the end of the animation sequence, when the loader is rotated 360 degrees. Therefore, the ribbon completes a full rotation over the course of four seconds.

You can also define border-bottom to add a second spinning ribbon:

See the Pen CSS Loading Spinner Example - two borders by HubSpot (@hubspot) on CodePen.

… and you can define border-right and border-left to add multiple colors:

See the Pen CSS Loading Spinner Example - four borders by HubSpot (@hubspot) on CodePen.

How to Create a Spinner in Bootstrap

If you're using the CSS framework Bootstrap, you have a built-in way to create a couple kinds of animations for your loading states.

To make a spinner in Bootstrap, use the following code:

Here's what that code looks like in action.

See the Pen css loading animation - bootstrap spinner by HubSpot (@hubspot) on CodePen.

Note that I've added the m-5 (margin) value for presentation purposes - you can change this value or remove it based on your needs.

Bootstrap also includes a growing spinner, which you can insert with the following code:

Visually, here's what the growing spinner looks like:

See the Pen css loading animation - bootstrap spinner 2 by HubSpot (@hubspot) on CodePen.

Examples of CSS Loading Animations

1. Growing and Shrinking Square Loading Animation

This example consists of a square that both changes size and rotates over the course of the animation duration. Try changing the cubic bezier function (basically a fancy way to customize the timing of your animation) to change how the animation effect looks.

See the Pen css loading animation: growing and shrinking by HubSpot (@hubspot) on CodePen.

2. Scaling Ellipses Loading Animation

This next example is another effective alternative to the spinning visual.

The div labeled loader contains three child divs, and each of these is assigned the same animation. However, the start of the animation for the second and third child divs is delayed with the animation-delay property, creating a ripple effect.

See the Pen css loading animation: pulsing example by HubSpot (@hubspot) on CodePen.

3. Bouncing Ellipses Loading Animation

Similar to the previous example, the dots in this example bounce up and down instead of scaling. It's a more playful way to communicate the same message.

See the Pen CSS loading animation - jumping dots by HubSpot (@hubspot) on CodePen.

4. Pulsing Circle Loading Animation

This example uses the CSS scale and opacity properties to create a pulsing effect.

See the Pen CSS loading animation - pulsing circle by HubSpot (@hubspot) on CodePen.

5. Spinning Gradient Loading Animation

One of my personal favorites, this animation is similar to the spinner example covered above. The gradient border effect is achieved by first drawing a circle with a gradient background, and then placing a circle on top of it that matches the background color, so only a sliver of the gradient circle is visible.

See the Pen css loading animation - gradient spinner by HubSpot (@hubspot) on CodePen.

6. Progress Bar Loading Animation

Here's an example of a simple progress bar that fills over a fixed time interval.

See the Pen CSS loading animation - progress bar 1 by HubSpot (@hubspot) on CodePen.

To make the bar load in conjunction with the actual backend loading process, you need JavaScript to fetch loading information. Here's a template you can use where backend loading is simulated with JavaScript

See the Pen CSS loading animation - progress bar 2 by HubSpot (@hubspot) on CodePen.

I've also pulled this example from CodePen with a bit more visual flair:

See the Pen progress by Both (@bold02) on CodePen.

7. Ripple Effect Loading Animation

This ripple loading animation template creates a relaxing effect reminiscent of water droplets. You can easily speed up or slow down the effect by tweaking the keyframes.

See the Pen CSS loading animation - ripple by HubSpot (@hubspot) on CodePen.

8. Loading Text Animation with Ellipses

Nothing wrong with simply telling the user their content is loading. Here's a subtle animation that reveals the ellipses after the word in a stepwise way.

See the Pen CSS loading animation - loading text animaton by HubSpot (@hubspot) on CodePen.

9. Loading Text Animation with Cards

Here is another take on the loading text, this time with flipping cards to keep the user engaged.

See the Pen CSS loading animation - text animation 2 by HubSpot (@hubspot) on CodePen.

10. Spinning Gear Loading Animation

This example uses a rotating SVG of a gear to communicate that the back end is working away:

See the Pen CSS loading animation - gears 1 by HubSpot (@hubspot) on CodePen.

I can also add a second gear and some additional CSS to make it look like the cogs are interlocked:

See the Pen CSS loading animation - gears 2 by HubSpot (@hubspot) on CodePen.

11. Fading Bars Loading Animation

Here's another engaging animation whose visuals imply loading on the backend. The rapidly changing opacity on the div elements creates a sort of "scanning" effect.

See the Pen CSS loading animation - fading bars animation by HubSpot (@hubspot) on CodePen.

12. Newton's Cradle CSS Animation

This example from CodePen is an impressively creative recreation of a Newton's cradle effect that you can adapt for a loading animation.

See the Pen Newton's cradle using only CSS by Arushi Bajpai (@arushi011) on CodePen.

I've taken the code and modified it for a more minimalist look:

See the Pen Newton's cradle using only CSS - minimalist version by HubSpot (@hubspot) on CodePen.

13. Liquid Fill Loading Animation

This CodePen animation gives the illusion of an element "filling up" with fluid as an alternative to a loading bar.

See the Pen Play Fill Loader by Chris Gannon (@chrisgannon) on CodePen.

14. Skeleton Screen Animation example

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.

Image Source

Here's an example of a skeleton screen loading animation that holds users' attention until all visible page content is loaded.

See the Pen Skeleton Screen Demo by Joe (@hijiangtao) on CodePen.

15. Advanced Spinner Loading Animations

Since spinners are such a common type of infinite-loading animation, let's take a look at a few more examples below.

In this example, the animation-timing property of the loading spinner below is set to "ease-in-out," which means it has both a slow start and a slow end.

See the Pen css svg spinner by Fabio Ottaviani (@supah) on CodePen.

This animation example animates an SVG:

See the Pen Trinity spinner by Abraham Samma (@ABSamma) on CodePen.

Lastly, this example cleverly implements box shadow to make a glowing effect:

See the Pen Glowing Loader Ring Animation by Ekta maurya (@Curlmuhi) on CodePen.

Why use 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.

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.

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 faster loading time more than a beautiful spinner.

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.

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.

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.

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. The best part? It's easy to create a loading animation with some basic web design knowledge.

Editor's note: This post was originally published in February 2020 and has been updated for comprehensiveness.

Topics:CSS Animation

Don't forget to share this post!