Pure CSS Loader

Today's tutorial is going to be an easy one, but one that might change the way you do loading animations. I have seen many times people use SVG's and icon fonts to create an animated loading icon. This is all fine and good, but there is an easier way. A way with pure css.

Our loader is going to be a circle with a part of it spinning. It is super easy so let's get to it.

To start we are going to need some basic markup. The only thing that is needed is a simple div

<div class="loading"></div>

Now to make the circle we are going to have to use border radius that is clear, but how about the brighter section that we see spinning. That is actually a border. That's right, everything we see is just a border.

.loading {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: solid 10px rgba(255, 255, 255, 0.2);
  border-top-color: #FFF;
}

Take a second to go through that and make sure you understand how that is working. Next we need the animation.

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

And add it to our loading style

.loading {
  /* Other Styles */

  animation: spin 1s infinite linear;
}

Please keep in mind that you will need vendor prefixes for some of these things. I have not added them into this tutorial for sake of clarity but have added them to the demo.

Demo