پیشنمایش زنده
کد HTML
<div class="container">
<svg width="100%" height="100" viewBox="-1 -1 22 22">
<path style="--order: 7" class="eight e-8"></path>
<path style="--order: 6" class="eight e-7"></path>
<path style="--order: 5" class="eight e-6"></path>
<path style="--order: 4" class="eight e-5"></path>
<path style="--order: 3" class="eight e-4"></path>
<path style="--order: 2" class="eight e-3"></path>
<path style="--order: 1" class="eight e-2"></path>
<path style="--order: 0" class="eight e-1"></path>
</svg>
</div>
کد CSS
.container {
overflow: hidden;
}
.container svg {
--spin-duration: 2000ms;
--infinity-duration: 2000ms;
--hsl-base-h: 5deg;
--hsl-base-s: 70%;
--hsl-base-l: 50%;
animation: spin81213 var(--spin-duration) linear infinite;
}
.eight {
--eight-length-px: 60.84563446044922px;
/* As seen on getTotalLength */
--offset: calc(var(--order) * 5px);
animation: infinity8123 var(--infinity-duration) linear infinite;
d: path("m5 5a1 1 0 0110 0c0 4-10 6-10 10a1 1 0 0010 0c0-4-10-6-10-10");
fill: none;
stroke: hsl(calc(var(--hsl-base-h) * var(--order)) var(--hsl-base-s) var(--hsl-base-l));
stroke-dasharray: 6px calc(var(--eight-length-px) - 6px);
stroke-linecap: round;
stroke-width: calc(1 - var(--order) / 10);
}
@keyframes infinity8123 {
0% {
stroke-dashoffset: calc(var(--eight-length-px) + var(--offset));
}
100% {
stroke-dashoffset: var(--offset);
}
}
@keyframes spin81213 {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}