Check out this amazing snippet Weird Circle Loader Designed by Joni Trythall.
Weird Circle Loader
HTML
[code language=”html”]
<div class="demo">
<svg class="loader" viewBox="0 0 150 150">
<filter id="blur">
<fegaussianblur in="SourceGraphic" stddeviation="2"></fegaussianblur>
</filter>
<circle class="circ-1" cx="75" cy="75" r="60" fill="transparent" stroke="#F4F519" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
<circle class="circ-2" cx="75" cy="75" r="60" fill="transparent" stroke="#DE2FFF" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
<circle class="circ-3" cx="75" cy="75" r="60" fill="transparent" stroke="#FF5932" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
<circle class="circ-4" cx="75" cy="75" r="60" fill="transparent" stroke="#E97E42" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
<circle class="circ-6" cx="75" cy="75" r="60" fill="transparent" stroke="#00DCA3" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
<circle class="circ-7" cx="75" cy="75" r="60" fill="transparent" stroke="purple" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
<circle class="circ-8"cx="75" cy="75" r="60" fill="transparent" stroke="#AAEA33" stroke-width="6" stroke-linecap="round" stroke-dasharray="385" stroke-dashoffset="385" filter="url(#blur)"></circle>
</svg>
</div>
[/code]
CSS / SCSS
[code language=”css”]
body {
background: #372940;
}
.demo {
margin: 120px auto;
width: 150px;
}
/*
Tansform origin got wonky after a few years 🙁
circle {
animation: draw 4s infinite ease-in-out;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.circ-2,
.circ-6 {
animation-delay: 1s;
}
.circ-7{
animation-delay: 2s;
}
.circ-4,
.circ-8 {
animation-delay: 3s;
}
.circ-3 {
left: -150px;
transform: rotateY(180deg);
}
.circ-6,
.circ-7,
.circ-8 {
left: -150px;
transform: rotateX(180deg) rotateY(180deg);
}
.circ-5 {
opacity: .2;
}
@keyframes draw {
50% {
stroke-dashoffset: 0;
transform: scale(.5);
}
}
*/
[/code]
JS
[code language=”js”]
const tl = new TimelineMax({yoyo:true, repeat:-1});
tl.set(".circ5", {
scale: .8
})
.fromTo("circle", 1, {
transformOrigin: "50% 50%"
}, {
rotation: -90
})
.set(".circ-3, .circ-6, .circ-7, .circ-8", {
rotation: 180
})
.staggerTo("circle", 4, {
strokeDashoffset: 0,
scale: .5,
}, 0.5);
[/code]
