Pure CSS3 Loading Spinner
Well, nothing to say here. I was bored :)
HTML
<div class="container">
<div class="spinner border"></div>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.container{
width:330px;
margin:10px auto
}
.spinner, .border{
border-top: 50px solid #0A5BC4;
border-left: 50px solid #00A600;
border-right: 50px solid #DC572E;
border-bottom: 50px solid #BF1E4B;
height:0;
width:0px;
border-radius: 50px;
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
margin-right:10px;/*Just 4 spacing*/
display:inline-block;/*Can also be removed*/
}
.spinner:last-child{
margin:0;
}
.border{
border-top: 10px solid #0A5BC4;
border-left: 10px solid #00A600;
border-right: 10px solid #DC572E;
border-bottom: 10px solid #BF1E4B;
height:80px;
width:80px;
-webkit-animation-name: spinback;
-webkit-animation-duration: .5s;
-moz-animation-name: spinback;
-moz-animation-duration: .5s;
animation-name: spinback;
animation-duration: .5s;
animation-name: spinback;
animation-duration: .5s;
}
@keyframes spin{
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes spinback{
100%{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
@-webkit-keyframes spin{
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@-webkit-keyframes spinback{
100%{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
@-moz-keyframes spin{
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@-moz-keyframes spinback{
100%{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
JavaScript
//________Pure CSS Loading Spinner________
/*
This little thing was done by Re3ker
Free to use guys!
Have fun with it.
*/