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