Minimal Loader

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; } }
JAVASCRIPT
Expand for more options Login