arrow-down close database design github idea menu mobile print twitter webpage

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.


See the Pen EaxpdZ by Christopher Bishop (@cibgraphics) on CodePen.

Start your project today!