Pure CSS3 Loading Spinner Animations

For this tutorial, we are going to create pure CSS3 spinning animations; we will not use any javascript or jQuery code nor use libraries, images ...

HTML Markup :

in the page’s Html Markup just add a <div> element with a class name "loading" where you want the spinner animation to show up, that's all :

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

The CSS :

the following CSS code will render this spinner loading animation :

CSS –Part 1 :

In the first part we will define our spinner style, with CSS3 we can create many shapes, like lines, squares, pies, circles … but also we can generate textures, stripes and other complex patterns.

In this case we will use the div borders and assign a radius value equal to the width of each border, and we'll obtain a circle divided by 4. We can color each border to have a nice spinning wheel :

.loading
{
  width:0;
  height:0;
  border-right:20px solid #3399ff;
  border-top:20px solid red;
  border-left:20px solid yellow;
  border-bottom:20px solid green;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

CSS –Part 2 :

The second part is the animation; we have to rotate our div indefinitely, this can be done by using the CSS3 animations to perform a 360° rotation. We can control the direction, speed and the movement style (linear, ease, ...) :

.loading
{
  /* Animate and rotate the spinner using CSS3 Animations */
  animation: bganim 0.6s linear 0s infinite;
  /* moz: Vendor prefixe for Mozilla Firefox */
  -moz-animation: bganim 0.6s linear 0s infinite;
  /* webkit: Vendor prefixe for Google Chrome, Chromium, Apple Safari... */
  -webkit-animation: bganim 0.6s linear 0s infinite;
}

@keyframes bganim {
  /* Rotate the div 360° */
  from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}
@-moz-keyframes bganim {
  from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes bganim {
  from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }
}

As you noticed each line is repeated with "-moz" and "-webkit" prefixes, this is for compatibility reasons for browsers like Mozilla, chrome, safari ...

To change the animation speed change the second part in the "animation:" lines (for example 0.5s : half a second) and to inverse the rotation direction, just switch the "transform:rotate"  values : "0deg" and "360deg". Also change linear to ease to have an animation style like the forth spinner in the above running example.

That's all !!!

Other Spinners :

Replace the Part1 CSS code with the following CSS to create the correspondent spinner :

.loading {
  height:5px;
  width:40px;
  background-color:#000000;
}

.loading {
  /* This is a CSS half cicle */
  height:20px;
  width:40px;
  border-radius: 0 0 90px 90px;
  -moz-border-radius: 0 0 90px 90px;
  -webkit-border-radius: 0 0 90px 90px;
  background:gray;
}

.loading {
  width:0;
  height:0;
  border-right:20px solid #444;
  border-top:20px solid #777;
  border-left:20px solid #aaa;
  border-bottom:20px solid #eee;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

.loading {
  width:0;
  height:0;
  border-right:20px solid #fff;
  border-top:20px solid #000;
  border-left:20px solid #fff;
  border-bottom:20px solid #000;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

Feel free to comment, I'd love to hear your thoughts and ideas.