<span class="spinner"></span>
.spinner,.spinner:after{
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px;
border-radius: 50%;
z-index: 2
}
.spinner {
background-color: transparent;
border-top: 10px solid rgb(66,139,202);
border-right: 10px solid rgb(66,139,202);
border-bottom: 10px solid rgb(66,139,202);
border-left: 10px solid rgba(66,139,202,.2);
transform: translateZ(0);
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: .8s;
animation-name: spinner-loading
}
@keyframes spinner-loading{
0% {
transform: rotate(0deg)
} to {
transform: rotate(1turn)
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.