🎄 Get 50% off from our JavaScript course for the holidays! 🎄
How to Create Skeleton Loaders in CSS

How to Create Skeleton Loaders in CSS

Optimize your perceived performance by wireframing content

Ferenc Almasi • 🔄 2021 November 11 • 📖 5 min read

Motion plays an important role in any application. It can help you to make interfaces more expressive and intuitive, whilst also providing key information, such as feedback that can guide a user’s attention to important parts of your page.

When it comes to loading animations, motion can also play a big part in improving perceived performance. With the right balance of speed, direction, or easing, motion can make loading feel more performant.

Skeleton Loader example
Animation by Angela Delise on Dribbble
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
JavaScript Course

How Skeleton Loaders Improve Perceived Performance

A good example of perceived performance enhancement occurs in skeleton loaders. A skeleton loader can act as a placeholder for information that is still loading, helping the user focus on progress instead of wait times.

This is what we’ll look at creating in this article. We will look at improving the loading animation of a dashboard from a simple loading spinner to a placeholder loading animation, and eventually, turn:

transition between the different animations

The Loading Animation Explained

The animation is quite simple yet very effective. We want to animate a gradient from left to right. We also want to make sure the gradient goes over its container to disappear, before starting all over again.

When thinking about motion, we should usually aim for a duration somewhere between 300–500ms. Anything below this duration, animations become too fast to perceive; anything above can feel sluggish, making users feel they are waiting more than they actually are. It’s also important to note that the more complex and larger the animation, the slower it should be. Just like larger objects in the real world move at a slower pace.

In the gif above, the animation takes over 2 seconds to complete, making the application’s performance feel laggy. Therefore, we’ll go for a shorter duration. However, because of its large dimensions, we may still end up over 500ms.

We also want to make use of a nice easing to make the animation feel more natural. Nothing in the real world moves at a constant, linear pace. To fully understand how the animation will work, the best way is to explain it through another animation:

Animating a gradient

animation explained

Here we’re animating a gradient from left to right, starting from outside of the container. To break it down:


Writing The CSS for the Loader

From the HTML side, we will only be working with a single placeholder element. Let it be:

<div class="placeholder-item"></div>
placeholder.html
Copied to clipboard!

The whole animation will go inside a ::before element. This is a pseudo-element that is often used to add cosmetics to the selected element. Think of pseudo-element as an added keyword to a selector that lets you style specific parts of it. But before taking care of it, let’s define some styles for the parent:

.placeholder-item {
    box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15);
    border-radius: 4px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
loading.css
Copied to clipboard!

The important rules defined above are the last two lines. We will position the ::before element absolutely to its container, so the placeholder item needs to have a relative position and its overflow set to hidden. This will prevent the gradient from showing outside of our placeholder element. Moving on to the ::before pseudo-element:

Using a pseudo-element

.placeholder-item::before {
    content: '';
    display: block;
    position: absolute;
    left: -150px;
    top: 0;
    height: 100%;
    width: 150px;
    background: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
    animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}
loading.css
Copied to clipboard!

Let’s analyze the code of this pseudo-element:

@keyframes load {
    from {
        left: -150px;
    }
    to   {
        left: 100%;
    }
}
loading.css
Copied to clipboard!

With everything in place, this will result in the following animation:

The complete animation

Summary

When dealing with subtle animations, you can see that implementing them shouldn’t be much work. Yet the user experience they provide outweighs the time and effort that goes into them.

If you also change the fixed width of the gradient to a percentage, you’ll also be able to reuse the animation on different shapes and sizes. You only need to write it once, then use it as you like.

What are your favorite animations when it comes to loading? Let us know in the comments. Thank you for reading through, happy styling. 🎨

10 Best Practices for Quickly Improving Your CSS
Share on
  • twitter
  • facebook
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended

🎉 Thank you for subscribing to our newsletter. x