How to create a CSS-only loader with one element
Written by Temani Afif Web Developer
August 7, 2022
Website Tips
A loader is an important component of a website. It can be used in many places where we need to show that something is in progress. Such a component needs to be as simple as possible and in this post, we will learn how to create different CSS-only loaders with an optimized code.
I have created a collection of more than 500 CSS-only loaders. They are made using only one element and we are going to dissect the code of some of them.
Let’s start with some classic loaders where we will animate the “Loading…” text in different ways.
See the Pen by Temani Afif () on .
Let’s start with the fourth and fifth loaders where I am relying on a clip-path animation.
.classic-4 {
font-family: monospace;
clip-path: inset(0 3ch 0 0);
animation: c4 1s steps(4) infinite;
}
@keyframes c4 {
to {clip-path: inset(0 -1ch 0 0)}
}
The main trick relies on using a Monospace font to make sure all the characters have the same width defined by 1ch then we use clip-path to show/hide some of the characters. For the fourth loader I simply consider the 3 dots at the end and here is a figure to illustrate the trick:
Initially, we hide all the dots by using inset(0 3ch 0 0). This means we are hiding a width equal to 3ch from the right side (only three characters). Then we animate this to inset(0 -1ch 0 0).
Intuitively we should use inset(0 0 0 0) to show all the dots and this is true if we want to create a continuous animation like the below:
See the Pen by Temani Afif () on .
But we want a discrete animation using steps() and for this, we need to go beyond the element boundary by an extra character.
See the Pen by Temani Afif () on .
We are doing the same with the fifth loader but instead of hiding only the 3 dots using inset(0 3ch 0 0) we are hiding all the text using inset(0 100% 0 0). Same logic, two different loaders!
Let’s now check the seventh and eighth loaders. For those, I am relying on gradient animation. Here is a step-by-step illustration to understand the trick:
See the Pen by Temani Afif () on .
We first start by creating and animating a gradient. The trick is to have a gradient with two colors that has a width twice bigger than the main element then we slide that gradient from right to left to swap between both colors.
.one {
background:
linear-gradient(90deg,red calc(50% + 0.5ch),#000 0)
right/calc(200% + 1ch) 100%;
animation: c1 2s infinite linear;
}
@keyframes c1 {to{background-position: left}}
Like the previous loaders, we add an extra 1ch which is needed later for the discrete animation.
Then we use that gradient to color the text instead of the background and we update the linear animation to a discrete one using steps. As simple as that!
And by simply using a different gradient we create another loader where we color each letter instead of coloring all the text.
background:
linear-gradient(90deg,#000 calc(50% - 0.5ch),red 0 calc(50% + 0.5ch),#000 0)
right/calc(200% + 1ch) 100%
See the Pen by Temani Afif () on .
I am also using a text-shadow trick for some loaders where the idea is to duplicate the “loading…” text using a shadow and then animate it.
For example with the ninth loader from the above collection
.classic-9 {
font-weight: bold;
font-family: monospace;
font-size: 30px;
color:#0000;
overflow:hidden;
animation:c9 5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes c9 {
0% {text-shadow: 0 0 #000, 11ch 0 green, 22ch 0 red, 33ch 0 blue,44ch 0 #000}
25% {text-shadow:-11ch 0 #000, 0ch 0 green, 11ch 0 red, 22ch 0 blue,33ch 0 #000}
50% {text-shadow:-22ch 0 #000,-11ch 0 green, 0ch 0 red, 11ch 0 blue,22ch 0 #000}
75% {text-shadow:-33ch 0 #000,-22ch 0 green,-11ch 0 red, 0ch 0 blue,11ch 0 #000}
100%{text-shadow:-44ch 0 #000,-33ch 0 green,-22ch 0 red,-11ch 0 blue, 0ch 0 #000}
}
I have five shadow layers and each time I update the X offset to create a sliding animation. Here is what we get if we omit the overflow property:
