CSS
.loader {
display:block;
position:absolute;
left:50%;
top:50%;
margin-left:-34px;
margin-top:-34px;
height:48px;
width:48px;
border: 10px solid #faf;
border-top: 10px solid #cde;
z-index: 1;
border-bottom: 10px solid #cde;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEUAAABPT09PI3z5AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfiAgQAGyT3z/tVAAAAFklEQVQI12OwZ2Cob2D4fwAdAQXtGQDDgwz3SpwhkwAAAABJRU5ErkJggg==') center;
border-radius: 50%;
min-width: 48px;
min-height: 48px;
animation: spin 0.5s steps(7) infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
