Spinner w czystym css3

Tworzymy div

<div class="spinner"><div class="spinner"</div></div>

A w stylach:

.spinner {
   height:20px;
   width:20px;
   margin:0px auto;
   position:relative;
   animation: rotation .6s infinite linear;
   border-left:6px solid rgba(0,174,239,.15);
   border-right:6px solid rgba(0,174,239,.15);
   border-bottom:6px solid rgba(0,174,239,.15);
   border-top:6px solid rgba(0,174,239,.8);
   border-radius:100%;
}

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}