<div class="loading"></div>
body {
background: #262526;
}
.loading {
width: 30px;
height: 30px;
border: 5px solid #ccc;
position: fixed;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
border-radius: 50%;
}
.loading:after {
content: '';
position: absolute;
width: 40px;
height: 10px;
background: #262526;
top: 10px;
left: -5px;
animation: spin 1.2s infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.