Create a gist now

Instantly share code, notes, and snippets.

@jkneb /spinner.css
Last active Nov 6, 2016

What would you like to do?
CSS spinner with LESS
/*
* 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);
}
/*
* 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); }
}

I want the html code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment