پیشنمایش زنده
کد HTML
<div class="loader">
<span style="--i:1" class="element"></span>
<span style="--i:2" class="element"></span>
<span style="--i:3" class="element"></span>
<span style="--i:4" class="element"></span>
<span style="--i:5" class="element"></span>
<span style="--i:6" class="element"></span>
<span style="--i:7" class="element"></span>
<span style="--i:8" class="element"></span>
<span style="--i:9" class="element"></span>
<span style="--i:10" class="element"></span>
<span style="--i:11" class="element"></span>
<span style="--i:12" class="element"></span>
<span style="--i:13" class="element"></span>
<span style="--i:14" class="element"></span>
<span style="--i:15" class="element"></span>
</div>
کد CSS
.loader {
transform: rotateX(70deg);
}
.loader .element {
display: block;
border-left: 5px solid rgb(120, 47, 255);
border-right: 5px solid rgb(120, 47, 255);
border-top: dotted 2px rgb(92, 5, 114);
width: 10rem;
height: 1rem;
margin-top: 0.5rem;
perspective: 1000px;
animation: rotate 5s infinite linear;
animation-delay: calc(var(--i) * 0.2s);
}
@keyframes rotate {
100% {
transform: rotateY(360deg);
}
}