HTML
<figure class="preloader">
<svg width="200px" height="200px" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="#444" fill="none" stroke-width="10"></circle>
<circle cx="50" cy="50" r="40" stroke="#40C5A2" fill="none" stroke-width="6" stroke-linecap="round" class="preloader_spinner"></circle>
</svg>
</figure>
CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #43cea2;
background: linear-gradient(to left, #43cea2 , #185a9d);
}
.preloader_spinner {
animation: spin 2s infinite linear;
}
@keyframes spin {
from {
stroke-dashoffset: 0;
stroke-dasharray: 200.8 50.19999;
}
50% {
stroke-dasharray: 1 250;
}
to {
stroke-dashoffset: 502;
stroke-dasharray: 200.8 50.19999;
}
}
