SVG Loader

HTML
<div class='contain'> <svg height='165' width='165'><circle cx='80' cy='80' fill='none' r='60' stroke-width='20' stroke='#FEFEFE'></circle>) /> </svg> <svg height='165' width='165'><circle cx='80' cy='80' fill='none' r='60' stroke-width='20' stroke='#FEFEFE'></circle>) /> </svg> <svg height='165' width='165'><circle cx='80' cy='80' fill='none' r='60' stroke-width='20' stroke='#FEFEFE'></circle>) /> </svg> <svg height='165' width='165'><circle cx='80' cy='80' fill='none' r='60' stroke-width='20' stroke='#FEFEFE'></circle>) /> </svg> </div>
SCSS
$colors: #3498db, #e74c3c, #2ecc71, #f1c40f; $go: fall-to 2s infinite ease-in-out; $delay: 100ms; @mixin dashing($offset, $array) { stroke-dashoffset: $offset; stroke-dasharray: $array; } html, body { height: 100%; width: 100%; overflow: hidden; } body { background: #222; display: flex; justify-content: center; align-items: center; } .contain { position: relative; width: 130px; } svg { position: absolute; } svg circle { animation: $go; transform-origin: center; } svg:nth-of-type(1) circle { stroke: nth($colors, 4); @include dashing(110px, 110px); } svg:nth-of-type(2) circle { @include dashing(165px, 171px); stroke: nth($colors, 1); animation-delay: $delay; } svg:nth-of-type(3) circle { @include dashing(10px, 12px); stroke: nth($colors, 2); animation-delay: $delay + 100; } svg:nth-of-type(4) circle { @include dashing(36px, 136px); stroke: nth($colors, 3); animation-delay: $delay + 200; } @keyframes fall-to { 50% { stroke-dashoffset: 40px, 200px; stroke-dasharray: 50px, 20px; transform: rotateZ(360deg) rotateY(360deg) scale(.1); } }
JAVASCRIPT
Expand for more options Login