پیشنمایش زنده
کد HTML
<section class="loader">
<article style="--d: 1" class="ring"></article>
<article style="--d: 2" class="ring"></article>
<article style="--d: 3" class="ring"></article>
<article style="--d: 4" class="ring"></article>
<article style="--d: 5" class="ring"></article>
<article style="--d: 6" class="ring"></article>
<article style="--d: 7" class="ring"></article>
<article style="--d: 8" class="ring"></article>
<article style="--d: 9" class="ring"></article>
<article style="--d: 10" class="ring"></article>
<article style="--d: 11" class="ring"></article>
<article style="--d: 12" class="ring"></article>
<article style="--d: 13" class="ring"></article>
<article style="--d: 14" class="ring"></article>
<article style="--d: 15" class="ring"></article>
<article style="--d: 16" class="ring"></article>
<article style="--d: 17" class="ring"></article>
<article style="--d: 18" class="ring"></article>
<article style="--d: 19" class="ring"></article>
<article style="--d: 20" class="ring"></article>
<article style="--d: 21" class="ring"></article>
<article style="--d: 22" class="ring"></article>
<article style="--d: 23" class="ring"></article>
<article style="--d: 24" class="ring"></article>
<article style="--d: 25" class="ring"></article>
<article style="--d: 26" class="ring"></article>
<article style="--d: 27" class="ring"></article>
<article style="--d: 28" class="ring"></article>
<article style="--d: 29" class="ring"></article>
<article style="--d: 30" class="ring"></article>
<article style="--d: 31" class="ring"></article>
<article style="--d: 32" class="ring"></article>
<article style="--d: 33" class="ring"></article>
</section>
کد CSS
.loader {
font-size: 10.5px;
width: 30em;
height: 30em;
&,
.ring {
position: absolute;
left: 50%;
top: 41%;
transform: translate(-50%, -50%);
}
.ring {
width: 10em;
height: 10em;
border-radius: 50%;
border: 2px solid lime;
animation: girar 10s linear infinite;
animation-delay: calc(-0.3333333s * var(--d));
transform-origin: 50% 100%;
transition: filter cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
}
}
@keyframes girar {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}