When a visitor clicks on a link or push button on your website, they expect to see some kind of feedback. But, if nothing happens, nearly will conclude that something is incorrect. They'll quickly navigate abroad earlier they realize your site has been processing their asking.

A loading animation tin help prevent these types of bounces and provide a much amend user experience (UX) past letting people know that their request has been received and is being processed.

While some website builders or themes will offer built-in animation features, you lot tin create your ain using CSS. In this post, nosotros'll explain how you can do that with some basic web design knowledge, and provide some examples that your team tin 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 organisation is withal treatment their request. When a user clicks on a link or push button, the animation is displayed until the load process is complete.

Some animations have progress confined that indicate how long information technology will have for data or content to load. This gives users a real-fourth dimension update — or distraction — that makes waiting more endurable.

There are many different tools that can build loading animations. However, one of the nigh practical ones is CSS. Let'south explore why in the section below.

CSS for Loading Animations

To be clear, you could use another coding linguistic communication like JavaScript (JS) or a unproblematic blithe GIF for your loader.

However, CSS has some strengths that get in a applied solution for this purpose:

  1. Information technology's easy to edit. Y'all 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 smoothen 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 ix and Opera Mini. If you're not certain if information technology'south supported, tools like Modernizr can tell you if they are. For browsers that don't back up CSS loading animations, you can utilise a GIF instead.

Now that nosotros've explained when yous should use CSS (and when you shouldn't), permit'due south look at some loading animations that were built using this coding linguistic communication.

Examples of CSS Loading Animations

There are a diverseness of loading animations you can create with CSS. Here are the v most common types, with multiple examples of each.

1. Space Loading Blitheness

Infinite loading animations enquire the user to await without indicating how long. They tin be used when the waiting time is unknown or very short.

css loading animation: infinite loading dots example

Image Source

Infinite Loading Blitheness Example with Code

css loading animation: infinite loading wave example

See the Pen Create Water Wave ♒ Blitheness Effects in CSS by Bilal.Rizwaan (@Bilal1909) on CodePen.

ii. Determinate Loading Animation

Make up one's mind loading animations signal how long it will take for the page to load. These may offer a specific pct or number, but practice not have to. They can also be visual estimates like a circumvolve being drawn or a bar filling upward.

css loading animation: hourglass loading example

Epitome Source

Determinate Loading Animation Example with Code

css loading animation: determinate loading example

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

iii. Progress Bar

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

css loading animation: progress bar example

Image Source

Progress Bar Instance with Code

css loading animation: indeterminate progress bar example

See the Pen progress by Ychnightder-both (@ychnightder-the-bold) on CodePen.

iv. Skeleton Screen

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

css loading animation: skeleton screen example

Epitome Source

Skeleton Screen Example with Lawmaking

css loading animation: basic skeleton screen example

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

v. CSS Loading Spinner

CSS loading spinners point that the folio is loading equally an animation moving along a circular runway. The animation volition keep on this circular track until the page is loaded.

Since these are such a common blazon of space loading animation, let's take a expect at a few examples below.

Ease-in-out Loading Spinner

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

css loading animation: ease-in-out loading spinner example

Paradigm Source

Rainbow Loading Spinner

The loading spinner below is comprised of one parent div and several child divs. Each div is styled with different CSS properties then they're different colors and sizes, and start their blitheness sequence at dissimilar times.

css loading animation: rainbow loading spinner example

Prototype Source

Loading Spinner with Blithe Text

The loading spinner below is animated to spin at a speed of two seconds, infinitely. It also contains a div with the give-and-take "Loading" that's too animated to become fully transparent and fully opaque as the loader spins.

css loading animation: loading spinner with animated text example

Image Source

SVG Loading Spinner

The loading spinner beneath is an SVG circumvolve made upwards of three "dashes," which first as dots and then expand until they grade a circle. The animation loops infinitely.

css loading animation: SVG loading spinner example

Image Source

Gradient Loading Spinner

What makes the loading spinner beneath unique is its gradient background colour. It as well contains span elements, which have their own gradient background colors.

css loading animation: gradient loading spinner example

Image Source

Loading Spinner Case with Code

css loading animation: yellow loading spinner example

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

At present that we've seen some examples, permit's learn how you tin put them into action in the section below.

How to Make a Uncomplicated Loading Animation in CSS

Information technology'southward piece of cake to brand a unproblematic CSS loading animation. Let'due south walk through how to make the following loading spinner.

Come across the Pen past Christina Perricone (@hubspot) on CodePen.

Offset, add a div in HTML and define information technology with the classname "loader."

                                          
<div class="loader"></div>

Next, apply the CSS class selector .loader to customize your CSS loading blitheness. You can define mutliple properties, as shown in the rule set below.

                                          
.loader {
                      
  margin: car;
                      
  edge: 20px solid #EAF0F6;
                      
  edge-radius: fifty%;
                      
  border-top: 20px solid #FF7A59;
                      
  width: 200px;
                      
  height: 200px;
                      
  animation: spinner 4s linear space;
                      
}
                                            
@keyframes spinner {
                      
  0% { transform: rotate(0deg); }
                      
  100% { transform: rotate(360deg); }
                      
}

Let's explain how each property is working beneath.

The CSS margin property is set to "auto" to heart the loader on the page.

The CSS edge property defines the size, style, and color of the loader'southward border (which appears as the round track that the orange "ribbon"  moves around).

The CSS border-radius property set to 50% makes the loader into a circle.

The border-meridian property defines the size, style, and color of the loader itself (the orangish "ribbon"). Notice it has the same size and fashion every bit the border — only the colour is different. You tin also ascertain the border-lesser, border-correct, and border-left backdrop. Setting the border-bottom property will add a split up spinning "ribbon." Setting the border-right or -left backdrop will lengthen the one ribbon.

The width and height properties ascertain the size of the loading animation (the entire circle).

Lastly, the animation property defines the proper name, duration, timing, and iteration business relationship. In this example, the spinner is prepare to move at the same speed from commencement to end for 4 seconds, and and loop indefinitely.

The merely affair left to practice is set your animation's key frames. These volition depict how the loader should render at a given fourth dimension during the blitheness sequence. Make sure to utilise the animation name defined in the animation property (in this case, "spinner.")

But two cardinal frames are divers in this example. The kickoff occurs at 0% or the first moment of the animation sequence. The loader is configured to be rotated 0 degrees. The 2nd keyframe occurs at 100% (i.eastward. the last moment of the blitheness sequence). The loader is configured to exist rotated 360 degrees, so that the "ribbon" starts at the summit of the circle and completes a full rotation over the course of 4 seconds.

And that's it. But retrieve, your CSS loading animation doesn't accept to be that bones. Similar all things CSS, your imagination controls the possibilities.

Cheque out some of the coolest examples in 24 Creative and Unique CSS Animation Examples to Inspire Your Own.

CSS Loading Animation Best Practices

A loading blitheness should be carefully considered in terms of how it may affect user experience. So, consider the following tips to create an effective CSS loading blitheness.

1. The all-time loading animations have the least corporeality of time.

No matter how cute your spinning cat blitheness may expect, users will grow impatient if it lasts as well long. Keep your users' expectations in heed and make certain your animation takes every bit little time as possible. Users volition capeesh a fast loading time more than a cute spinner.

2. Ease the hurting of waiting.

If you provide the user with something interesting to wait at, the wait volition be less agonizing. An engaging blitheness will attract attending and keep the user decorated.

iii. Your animation is part of your brand.

While this isn't the place for a marketing campaign, it's important to go along your loader on-brand. Use your company'south palette and tone of phonation to remain consistent with your make.

4. Let the user know the reason for the wait.

Information technology's not always obvious why the user needs to wait and telling them can reduce friction during expect times. You don't have to be overly specific, instead, simple statements similar, "please wait while we become you lot set upward" or "wait a moment while we fetch your newly created certificate" work well.

5. Provide a await-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 exist patient with your tool or website. Information technology lets them know the system hasn't crashed, tells them how long a page will take to load, and maintains their attending past providing something to look at. The best part? It's like shooting fish in a barrel to create a loading blitheness with some basic web design knowledge.

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

New Call-to-action

{{slideInCta('be00be7b-acfc-4948-9055-bf6bf9746111')}

Originally published Aug 12, 2021 7:00:00 AM, updated Apr 20 2022