<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
This Pen doesn't use any external CSS resources.