<h1>Pure CSS spinner</h1>
<div class="spinner"></div>
h1{
margin: 20px auto;
color: orange;
text-align: center;
text-transform: uppercase;
}
@dim : 60px;
.spinner {
height:@dim;
width:@dim;
// margin:0 auto;
// position:relative;
position: absolute;
top:50%;
left:50%;
margin: -(@dim/2) 0 0 -(@dim/2);
-webkit-animation: rotation 1s infinite linear;
-moz-animation: rotation 1s infinite linear;
-o-animation: rotation 1s infinite linear;
animation: rotation 1s infinite linear;
border:6px solid rgba(0,0,0,.2);
border-radius:100%;
}
.spinner:before {
content:"";
display:block;
position:absolute;
left:-6px;
top:-6px;
height:100%;
width:100%;
border-top:6px solid rgba(0,0,0,.8);
border-left:6px solid transparent;
border-bottom:6px solid transparent;
border-right:6px solid transparent;
border-radius:100%;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
View Compiled
This Pen doesn't use any external CSS resources.