StrictThemes - WordPress Themes

SVG Loader Experiment

HTML
<svg viewbox=" 0 0 512 512"> <g><circle cx="256" cy="256" r="250" /></g> <g><circle cx="256" cy="256" r="225" /></g> <g><circle cx="256" cy="256" r="200" /></g> <g><circle cx="256" cy="256" r="175" /></g> <g><circle cx="256" cy="256" r="150" /></g> <g><circle cx="256" cy="256" r="125" /></g> <g><circle cx="256" cy="256" r="100" /></g> <g><circle cx="256" cy="256" r="75" /></g> <g><circle cx="256" cy="256" r="50" /></g> <g><circle cx="256" cy="256" r="15" /></g> </svg>
SCSS
html, body { height: 100%; width: 100%; } body { margin: 0; padding: 0; background-color: #34495e; display: flex; align-items: center; } svg { display: block; margin: 0 auto; height: 50%; } circle { fill: none; stroke-width: 6px; stroke-linecap: round; stroke: currentcolor; color: #2980b9; stroke-dasharray: 260,0,1,0,1,0,1,0,10, 1, 10, 1, 10, 1, 10, 1, 10, 10, 1, 10, 1, 10, 1, 10, 10, 1; animation: dostuff 18s ease infinite } @keyframes dostuff { 50% { stroke-dasharray: 10, 1, 10, 1, 10, 1,10,1,10,1,10,1,10,10, 10, 1, 20, 120, 1, 30, 1, 30, 1, 10, 30, 1; stroke-opacity:.5; } } @keyframes spin { 100% { transform: rotate(360deg); } } g { animation: spin 20s linear infinite; transform-origin: 50% 50%; &:nth-child(even){animation-direction: reverse} &:nth-child(1n) { animation-delay: -1s; } &:nth-child(2n) { animation-delay: -2s; } &:nth-child(3n) { animation-delay: -3s; } &:nth-child(4n) { animation-delay: -4s; } &:nth-child(5n) { animation-delay: -5s; } &:nth-child(6n) { animation-delay: -6s; } &:nth-child(7n) { animation-delay: -7s; } &:nth-child(1n) circle { animation-delay: -1.5s; } &:nth-child(2n) circle { animation-delay: -2.5s; } &:nth-child(3n) circle { animation-delay: -3.5s; } &:nth-child(4n) circle { animation-delay: -4.5s; } &:nth-child(5n) circle { animation-delay: -4.5s; } &:nth-child(6n) circle { animation-delay: -5.5s; } &:nth-child(7n) circle { animation-delay: -6.5s; } &:nth-child(8n) circle { animation-delay: -7.5s; } &:nth-child(9n) circle { animation-delay: -8.5s; } &:nth-child(10n) circle { animation-delay: -9.5s; } &:last-child circle { fill: #3498db; stroke: none; } }
JAVASCRIPT
Expand for more options Login