<div class="spinner">
  <span class="mask"></span>
</div>
body { margin:50px; background:white; }  

@spinnerSize:26px;
@spinnerColor:#999;
@spinnerThickness:6px;

.spinner {
  position:relative;
  width:@spinnerSize; height:@spinnerSize;
  border:@spinnerThickness solid @spinnerColor;
  border-radius:100%;
  -webkit-animation: spin 1s infinite linear;
     -moz-animation: spin 1s infinite linear;
      -ms-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
  
  .mask { 
    overflow:hidden; position:absolute;
    top:-@spinnerThickness; bottom:-@spinnerThickness; 
    right:@spinnerSize/2; left:-@spinnerThickness;
    
    &:after {
    	content:''; position:absolute; top:0; left:0; 
    	border-radius:100%;
    	width:@spinnerSize; height:@spinnerSize;
  		border:@spinnerThickness solid lighten(@spinnerColor, 10%);
    	overflow:hidden; 
 		}
  }
}

@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
  to { -ms-transform: rotate(360deg); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
View Compiled
// just a very simple css3 spinner made with only 2 divs
// will work on every browsers except IE because it doesn't support css animations
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js