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);
}
}
