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