CSS spinner with LESS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Read more here: | |
* http://front-back.com/a-cool-css-spinner-with-less-variables | |
*/ | |
/* | |
* This is a nice full CSS3 loader made with LESS | |
* so you'll have to compile it into CSS to make it work in your project | |
* See the doc on the LESS website : http://lesscss.org/ | |
*/ | |
/* mixins */ | |
/* animations */ | |
.spin { | |
-webkit-animation: spin 750ms infinite linear; | |
-moz-animation: spin 750ms infinite linear; | |
animation: spin 750ms infinite linear; | |
} | |
@-webkit-keyframes spin { | |
to { | |
-webkit-transform: rotate(360deg); | |
} | |
} | |
@-moz-keyframes spin { | |
to { | |
-moz-transform: rotate(360deg); | |
} | |
} | |
.rspin { | |
-webkit-animation: rspin 2250ms infinite linear; | |
-moz-animation: rspin 2250ms infinite linear; | |
animation: rspin 2250ms 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: #eeeeee; | |
border-radius: 100%; | |
position: relative; | |
height: 55px; | |
width: 55px; | |
overflow: hidden; | |
} | |
.loader .c { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
margin: -34% 0 0 -34%; | |
width: 68%; | |
height: 68%; | |
background-color: #ffffff; | |
border-radius: 100%; | |
z-index: 3; | |
} | |
.loader .d { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
} | |
.loader .d .e { | |
z-index: 10; | |
position: absolute; | |
top: 1%; | |
left: 50%; | |
margin: 0 0 0 -5.5px; | |
border-top: 11px solid #cccccc; | |
border-left: 3.3px solid transparent; | |
border-right: 3.3px solid transparent; | |
height: 0; | |
width: 11px; | |
-webkit-transform: rotate(10deg); | |
-moz-transform: rotate(10deg); | |
border-radius: 5px 5px 0 0; | |
} | |
.loader .r { | |
z-index: 2; | |
position: absolute; | |
left: 50%; | |
top: -1px; | |
bottom: -1px; | |
margin-left: -2.75px; | |
background-color: #ffffff; | |
width: 5.5px; | |
} | |
.loader .r1 { | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
} | |
.loader .r2 { | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
} | |
.loader .r3 { | |
-webkit-transform: rotate(90deg); | |
-moz-transform: rotate(90deg); | |
} | |
.loader .r4 { | |
-webkit-transform: rotate(135deg); | |
-moz-transform: rotate(135deg); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Read more here: | |
* http://front-back.com/a-cool-css-spinner-with-less-variables | |
*/ | |
/* | |
* This is a nice full CSS3 loader made with LESS | |
* so you'll have to compile it into CSS to make it work in your project | |
* See the doc on the LESS website : http://lesscss.org/ | |
*/ | |
// u can custom almost everything u need with these variables just bellow | |
@loaderSize : 55px; | |
@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; | |
z-index:10; | |
position:absolute; top:1%; left:50%; | |
margin:0 0 0 -@thisWidth/2; | |
border-top:@thisWidth solid @forgroundColor; | |
border-left:@thisWidth*0.3 solid transparent; | |
border-right:@thisWidth*0.3 solid transparent; | |
height:0; width:@thisWidth; | |
-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); | |
border-radius:5px 5px 0 0; | |
} | |
} | |
.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); } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I want the html code.