Spinner in Pure CSS

Spinner in Pure CSS

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 of infinite 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.