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

Stylesheet :

in the page’s HEAD section just add the <style type="text/css"> with the "load {" codes you want the spinner animation to show as, that's all :

HTML Markup :

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

<div class="load#"></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 :

<style>
/* Begin Pure CSS Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
.load3 {
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;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.6s linear 0s infinite;
-moz-animation:bganim 0.6s linear 0s infinite;
-webkit-animation:bganim 0.6s linear 0s infinite;
}
</style>

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, ...) :

/* 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 :

<style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
.load1 {
height:5px;
width:40px;
background-color:#000000;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.5s linear 0s infinite;
-moz-animation:bganim 0.5s linear 0s infinite;
-webkit-animation:bganim 0.5s linear 0s infinite;
}
</style>

<style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
.load2 {
/* 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 Spinner Animation using CSS3 animations */
animation:bganim 0.5s linear 0s infinite;
-moz-animation:bganim 0.5s linear 0s infinite;
-webkit-animation:bganim 0.5s linear 0s infinite;
}
</style>

<style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
.load4 {
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 Spinner Animation using CSS3 animations */
animation:bganim 0.6s ease 0s infinite;
-moz-animation:bganim 0.6s ease 0s infinite;
-webkit-animation:bganim 0.6s ease 0s infinite;
}
</style>

<style>
/* Begin Pure CSS3 Loading Spinner Animations */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
.load5 {
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;
/* Loading Spinner Animation using CSS3 animations */
animation:bganim 0.8s linear 0s infinite;
-moz-animation:bganim 0.8s linear 0s infinite;
-webkit-animation:bganim 0.8s linear 0s infinite;
}
@keyframes bganim {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);}
</style>