پیشنمایش زنده
کد HTML
<aside class="loader">
<article class="min-circle" style="--p: 1;"></article>
<article class="min-circle" style="--p: 2;"></article>
<article class="min-circle" style="--p: 3;"></article>
<article class="min-circle" style="--p: 4;"></article>
<article class="min-circle" style="--p: 5;"></article>
<article class="min-circle" style="--p: 6;"></article>
<article class="min-circle" style="--p: 7;"></article>
<article class="min-circle" style="--p: 8;"></article>
<article class="min-circle" style="--p: 9;"></article>
<article class="min-circle" style="--p: 10;"></article>
<article class="min-circle" style="--p: 11;"></article>
<article class="min-circle" style="--p: 12;"></article>
<article class="min-circle" style="--p: 13;"></article>
<article class="min-circle" style="--p: 14;"></article>
<article class="min-circle" style="--p: 15;"></article>
<article class="min-circle" style="--p: 16;"></article>
<article class="min-circle" style="--p: 17;"></article>
<article class="min-circle" style="--p: 18;"></article>
<article class="min-circle" style="--p: 19;"></article>
<article class="min-circle" style="--p: 20;"></article>
<article class="min-circle" style="--p: 21;"></article>
<article class="min-circle" style="--p: 22;"></article>
<article class="min-circle" style="--p: 23;"></article>
<article class="min-circle" style="--p: 24;"></article>
<article class="min-circle" style="--p: 25;"></article>
<article class="min-circle" style="--p: 26;"></article>
<article class="min-circle" style="--p: 27;"></article>
<article class="min-circle" style="--p: 28;"></article>
<article class="min-circle" style="--p: 29;"></article>
<article class="min-circle" style="--p: 30;"></article>
<article class="min-circle" style="--p: 31;"></article>
<article class="min-circle" style="--p: 32;"></article>
<article class="min-circle" style="--p: 33;"></article>
<article class="min-circle" style="--p: 34;"></article>
<article class="min-circle" style="--p: 35;"></article>
<article class="min-circle" style="--p: 36;"></article>
<article class="min-circle" style="--p: 37;"></article>
<article class="min-circle" style="--p: 38;"></article>
<article class="min-circle" style="--p: 39;"></article>
<article class="min-circle" style="--p: 40;"></article>
<article class="min-circle" style="--p: 41;"></article>
<article class="min-circle" style="--p: 42;"></article>
<article class="min-circle" style="--p: 43;"></article>
<article class="min-circle" style="--p: 44;"></article>
<article class="min-circle" style="--p: 45;"></article>
<article class="min-circle" style="--p: 46;"></article>
<article class="min-circle" style="--p: 47;"></article>
<article class="min-circle" style="--p: 48;"></article>
<article class="min-circle" style="--p: 49;"></article>
<article class="min-circle" style="--p: 50;"></article>
<article class="min-circle" style="--p: 51;"></article>
<article class="min-circle" style="--p: 52;"></article>
<article class="min-circle" style="--p: 53;"></article>
<article class="min-circle" style="--p: 54;"></article>
<article class="min-circle" style="--p: 55;"></article>
<article class="min-circle" style="--p: 56;"></article>
<article class="min-circle" style="--p: 57;"></article>
<article class="min-circle" style="--p: 58;"></article>
<article class="min-circle" style="--p: 59;"></article>
<article class="min-circle" style="--p: 60;"></article>
<article class="min-circle" style="--p: 61;"></article>
<article class="min-circle" style="--p: 62;"></article>
<article class="min-circle" style="--p: 63;"></article>
<article class="min-circle" style="--p: 64;"></article>
<article class="min-circle" style="--p: 65;"></article>
<article class="min-circle" style="--p: 66;"></article>
<article class="min-circle" style="--p: 67;"></article>
<article class="min-circle" style="--p: 68;"></article>
<article class="min-circle" style="--p: 69;"></article>
<article class="min-circle" style="--p: 70;"></article>
<article class="min-circle" style="--p: 71;"></article>
<article class="min-circle" style="--p: 72;"></article>
<article class="min-circle" style="--p: 73;"></article>
<article class="min-circle" style="--p: 74;"></article>
<article class="min-circle" style="--p: 75;"></article>
<article class="min-circle" style="--p: 76;"></article>
<article class="min-circle" style="--p: 77;"></article>
<article class="min-circle" style="--p: 78;"></article>
<article class="min-circle" style="--p: 79;"></article>
<article class="min-circle" style="--p: 80;"></article>
<article class="min-circle" style="--p: 81;"></article>
<article class="min-circle" style="--p: 82;"></article>
<article class="min-circle" style="--p: 83;"></article>
<article class="min-circle" style="--p: 84;"></article>
<article class="min-circle" style="--p: 85;"></article>
<article class="min-circle" style="--p: 86;"></article>
<article class="min-circle" style="--p: 87;"></article>
<article class="min-circle" style="--p: 88;"></article>
<article class="min-circle" style="--p: 89;"></article>
<article class="min-circle" style="--p: 90;"></article>
<article class="min-circle" style="--p: 91;"></article>
<article class="min-circle" style="--p: 92;"></article>
<article class="min-circle" style="--p: 93;"></article>
<article class="min-circle" style="--p: 94;"></article>
<article class="min-circle" style="--p: 95;"></article>
<article class="min-circle" style="--p: 96;"></article>
<article class="min-circle" style="--p: 97;"></article>
<article class="min-circle" style="--p: 98;"></article>
<article class="min-circle" style="--p: 99;"></article>
<article class="min-circle" style="--p: 100;"></article>
<article class="min-circle" style="--p: 101;"></article>
<article class="min-circle" style="--p: 102;"></article>
<article class="min-circle" style="--p: 103;"></article>
<article class="min-circle" style="--p: 104;"></article>
<article class="min-circle" style="--p: 105;"></article>
<article class="min-circle" style="--p: 106;"></article>
<article class="min-circle" style="--p: 107;"></article>
<article class="min-circle" style="--p: 108;"></article>
<article class="min-circle" style="--p: 109;"></article>
<article class="min-circle" style="--p: 110;"></article>
<article class="min-circle" style="--p: 111;"></article>
<article class="min-circle" style="--p: 112;"></article>
<article class="min-circle" style="--p: 113;"></article>
<article class="min-circle" style="--p: 114;"></article>
<article class="min-circle" style="--p: 115;"></article>
<article class="min-circle" style="--p: 116;"></article>
<article class="min-circle" style="--p: 117;"></article>
<article class="min-circle" style="--p: 118;"></article>
<article class="min-circle" style="--p: 119;"></article>
<article class="min-circle" style="--p: 120;"></article>
<article class="min-circle" style="--p: 121;"></article>
</aside>
کد CSS
.loader {
width: 240px;
height: 240px;
position: relative;
transition: 3s;
.min-circle {
width: calc(50% - 20px);
height: 2px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 0%;
transform: rotate(calc(360deg / 120 * var(--p)));
transform-origin: calc(100% + 20px) 50%;
transition: 3s;
animation: animar 1s steps(1) infinite;
animation-delay: calc(-6050ms + var(--p) * 50ms);
background: dodgerblue;
&:nth-child(odd) {
background: springgreen;
}
}
&:hover {
width: 360px;
height: 360px;
}
}
@keyframes animar {
50% {
background: #0000;
}
}