How to build animated page loaders in CSS

Written by Sharvari Raut ✏️

Animated page loaders help users to be patient with a tool or website. It lets them know that the system has not crashed, tells them how long it will take to load the page, and keeps their attention by providing something entertaining that they can look at. The best part? It is easy to create downloadable animations in CSS with some basic web design skills.

It is common to see animated loaders on sites these days, especially as React web applications and websites grow. It is one of the many ways we can improve the perceived performance of an app, or in other words, make it seem like the site is loading faster than it is.

In this article, I will discuss the benefits of animated page loaders, then build a simple spinning wheel with CSS that you can use as a jumping-off point for building more complex and informative loaders.

What are page loaders?

A page loader is a web page component that provides a loading page overlay when you press a link or button. You can add different types of page loaders like spinners, loading bars, and hourglass animations.

Page loaders also function as notifications that assure users that the system is still in the process of handling their request. Animated page loaders are usually simple animations designed to entertain guests while the server is undergoing processing.

They are essential elements of a web page that should not be ignored in the development process, because if a user has to wonder whether their request is being processed, they will become frustrated.

Why should one use page loaders on their website?

Inevitably, certain elements on a website or app will require loading time. No one enjoys waiting, so you have to keep your users engaged in those milliseconds.

Page loaders are integral to perceived performance, or how long it feels like something is loading, regardless of the actual wait time. This is because they provide a small distraction for the user while they wait, which makes it feel like the time is going faster.

Page loaders also can indicate a reason why users are being required to wait. This can reduce frustration because it gives your users an understandable reason for the inconvenience. You do not have to be overly precise, but simple statements such as, "please wait while we load your content" or "we are working on downloading your document" work well.

Finally, page loaders can reduce user frustration by estimating how much time there is left to wait. Time management sets expectations and helps users to wait patiently. You can display this rating as a percentage or as a visible representation of progress.

Why is CSS the best option for page loaders?

There are several reasons why one should use CSS while creating page loaders.

First, it is easily editable. You can quickly adjust the timing, color, speed, and other animation features.

Second, animation is faster and smoother with CSS than with, for example, JavaScript. This is because CSS offloads animation logic to the browser, whereas JavaScript animation speeds depend on the library being used along with it.

Creating a basic animated page loader with CSS

While it can be pretty tempting to build the fanciest and coolest looking page loaders, we can do a pretty good job with only using CSS. In this tutorial, we will be building this spinning circle page loader.

Let’s get started. In the HTML file, add a div and name the class name as "loader":

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

Now, use the CSS class selector .loader to design your CSS loader animation. You can define multiple properties, like color, size, and alignment:

body{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.loader{
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border-top: 5px solid red;
  border-left: 3px solid brown;
  border-bottom: 1px solid purple;
  border-right: transparent;
  animation: spinner 0.8s linear infinite;
}

In the code above, we are giving the height and width of the loaders as 100px. Because we are making a circular spinner, the border-radius is 100px.

The border-top, border-bottom, and border-left properties determine the size, style, and color of our loader.

Setting the border-bottom property will create a separate, spinning, ribbon-like animation. Changing the border-right or -left properties will change the length and size of the ribbon.

We finally have the animation of our loader, which determines the name, duration, timing, and iteration of our loader. In our example, the spinner animation is made so that it moves at the same speed from start to end for 0.8s in each loop indefinitely:

> animation: spinner 0.8s linear infinite;

The last thing to do is set your animation's keyframes. These will show how the loader will render at a given time during the animation sequence:

@keyframes spinner{
  0%{
    transform: rotate(0deg);
  }

  100%{
    transform: rotate(360deg);
  }
}

There are two keyframes defined in our example. The first occurs at 0%, which is the first part of the animation sequence. The loader is then set to be rotated zero degrees.

The second keyframe occurs at 100%, which is the last part of the animation sequence.

The loader is then set to be rotated 360 degrees so that the animation of the spinner starts at the top of the circle and completes a full rotation to make a circle for 0.8s.

Congratulations! You now know how to build a simple but excellent loading effect page loader using nothing but HTML and CSS.

Further examples of page loaders

Showing duration

Duration loading animations determine how much time it will take for the page to load or fetch the request. These may offer a specific percentage, loading time, or number. They can also be represented visually, like a circle being completed or a bar filling up.

Endless animation

Endless animation is an example of an indeterminate indicator. It asks the user to wait without indicating for how long. They can be used when the waiting period is unknown or very short.

Custom animations

Fun animations are generally SVG loaders directly added to websites. These animations are sometimes challenging to build using just CSS. These loaders attract the user's attention and make their waiting time more comfortable.

Some JavaScript libraries help build these animations quickly, such as p5.js, GraphicsJS, D3.js, and many more.

Reason waiting loaders

Some loaders let us know the reason for waiting with a bit of text. These are effective at keeping users on our site. For example, loaders can tell you which step the process is on, like "fetching data," "connecting to peers," and "deleting files." This information helps to communicate with the user and get a proper level of understanding.

Conclusion

When designing a website, you should take all UI details into account. Having a good website does not help if the loading time is too long and half of the users leave even before they get a chance to see your site.

To prevent that from happening, you should add interesting animated loaders to your website to keep the user's attention as long as necessary until all the content is loaded. Add creative and design a funny waiting gif that every user can enjoy seeing!

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.

LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — Start monitoring for free.

Blog