<center style="margin-top:100px">
  
<div class="loader rspin">
  <span class="c"></span>
  <span class="d spin"><span class="e"></span></span>
  <span class="r r1"></span>
  <span class="r r2"></span>
  <span class="r r3"></span>
  <span class="r r4"></span>
</div>
  
</center>
/* 
 * This is a nice full CSS3 loader made with LESS 
*/

/* u can custom almost everything u need with these variables just bellow */

@loaderSize       : 75px;
@radThickness     : @loaderSize/10;
@spinSpeed        : 750ms;
@backgroundColor  : #eee;
@forgroundColor   : #ccc;
@masksColor       : #fff;
@middleCircleSize : 68%;


/* but from here u'll have to understand what u'r dealing with */

/* mixins */
.animation (@params) {
  -webkit-animation:@params;
     -moz-animation:@params;
          animation:@params;
}

/* animations */
.spin {
  .animation(spin @spinSpeed infinite linear);
}
  @-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); } }
  @-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); } }

.rspin {
  .animation(rspin @spinSpeed*3 infinite linear);
}
  @-webkit-keyframes rspin {
    to { -webkit-transform: rotate(-360deg); } }
  @-moz-keyframes rspin {
    to { -moz-transform: rotate(-360deg); } }


/* let's style that thing */
.loader {
  background-color:@backgroundColor;
  border-radius:100%;
  position:relative;
  height:@loaderSize;
  width:@loaderSize;
  overflow:hidden; 
  .c {
    position:absolute; left:50%; top:50%;
    margin:-@middleCircleSize/2 0 0 -@middleCircleSize/2;
    width:@middleCircleSize;
    height:@middleCircleSize;
    background-color:@masksColor;
    border-radius:100%;
    z-index:3;
  }
  
  .d {
    position:absolute; top:0; bottom:0; left:0; right:0; 
    .e { 
      @thisWidth : @loaderSize*0.2;
      position:absolute; top:1%; left:50%; 
      margin:0 0 0 -@thisWidth/2;
      height:14px; width:@thisWidth;
      -webkit-transform:rotate(10deg) skew(20deg); 
      -moz-transform:rotate(10deg) skew(20deg);
      border-radius:3px;
      background:#999;
     }
  }
  .r {
    z-index:2;
    position:absolute; left:50%; top:-1px; bottom:-1px;
    margin-left:-(@radThickness)/2;
    background-color:@masksColor;
    width:(@radThickness); 
  }
  .r1 { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); }
  .r2 { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); }
  .r3 { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); }
  .r4 { -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); }
}
View Compiled
/*
 * Read more here:
 * http://front-back.com/a-cool-css-spinner-with-less-variables
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.