So... This has been done before. There are so many articles, tutorials, and videos on Loaders/Spinners in CSS that I can't reference all of them in this post.
With that said, I'm going to show you my take on a pure CSS spinner. I'm going to skip the HTML for this article, it is really simple just one div
element.
The CSS
The CSS is also fairly simple for this one.
First, set the width
and height
of the spinner. We want them to be the same so that we get a square.
div {
/* Make it square */
width: 32px;
height: 32px;
}
Then turn the spinner into a circle.
div {
/* Make it round */
border-radius: 50%;
}
Now, make the spinner visible by adding a border. You can, of course, adjust the border width and color to your liking.
div {
/* Make it visible */
border: 6px solid black;
}
The problem with having a single color border is that we won't see it spinning. To fix that, we'll use a different color for one of the sides.
div {
/* Make it cool */
border-top-color: orange;
}
We'll also quickly center the spinner horizontally. To center it both vertically and horizontally, I'd recommend creating a parent element and setting display: grid; place-items: center;
on it.
div {
/* Center it */
margin: auto;
}
The animation
All the basic styles are in place now. So let's make it rotate.
Add an animation property to the spinner.
div {
/* Make it spin */
animation: spin 1s ease infinite;
}
In case you are not familiar with animations in CSS:
spin
is the name of the animation, we'll create that next.1s
is the duration of the animation.ease
is the animation's timing function. It determines how fast the animation is during different parts of its duration. Read more about timing functions.infinite
is the animation's iteration count, or how many times it should be repeated. A value ofinfinite
means it will continue repeating infinitely. Read more about animation iteration count.
Now that you know that, let's create the animation.
@keyframes spin{
to{
transform: rotate(360deg);
}
}
@keyframes
is a CSS At-rule. It allows you to control what happens at different parts of an animation.
The to
value determines the state of the animation when it ends. In this case, we want it to rotate 360 degrees.
When the animation starts over, it will start at a rotation of 0 degrees which is visually equivalent to 360 degrees. This means that we don't have to specify a from
value on the @keyframes
rule.
Putting it all together
div {
/* Make it square */
width: 32px;
height: 32px;
/* Make it round */
border-radius: 50%;
/* Make it visible */
border: 6px solid #000;
/* Make it cool */
border-top-color: orange;
/* Center it */
margin: auto;
/* Make it spin */
animation: spin 1s ease infinite;
}
@keyframes spin{
to{
transform: rotate(360deg);
}
}
And that's it! Your spinner should now be spinning.
Conclusion
Creating a spinner in pure CSS is relatively easy. A few simple rules and animation, and you're all set. This can obviously be improved upon a great deal.
You could switch up the colors or add a gradient border. Or you could create multiple spinners of different sizes that spin at different speeds. Your imagination is the limit.
If you found this article informative or useful, consider subscribing to my newsletter or following me here on Hashnode. You can also follow me on Twitter.