پیشنمایش زنده
کد HTML
<div
class="w-32 aspect-square rounded-full relative flex justify-center items-center animate-[spin_3s_linear_infinite] z-40 bg-[conic-gradient(white_0deg,white_300deg,transparent_270deg,transparent_360deg)] before:animate-[spin_2s_linear_infinite] before:absolute before:w-[60%] before:aspect-square before:rounded-full before:z-[80] before:bg-[conic-gradient(white_0deg,white_270deg,transparent_180deg,transparent_360deg)] after:absolute after:w-3/4 after:aspect-square after:rounded-full after:z-[60] after:animate-[spin_3s_linear_infinite] after:bg-[conic-gradient(#065f46_0deg,#065f46_180deg,transparent_180deg,transparent_360deg)]"
>
<span
class="absolute w-[85%] aspect-square rounded-full z-[60] animate-[spin_5s_linear_infinite] bg-[conic-gradient(#34d399_0deg,#34d399_180deg,transparent_180deg,transparent_360deg)]"
>
</span>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.z-40{z-index:40}.z-\[60\]{z-index:60}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.w-32{width:8rem}.w-\[85\%\]{width:85%}@keyframes spin{to{transform:rotate(360deg)}}.animate-\[spin_3s_linear_infinite\]{animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-\[spin_5s_linear_infinite\]{animation:spin 5s linear infinite}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.bg-\[conic-gradient\(\#34d399_0deg\2c \#34d399_180deg\2c transparent_180deg\2c transparent_360deg\)\]{background-image:conic-gradient(#34d399 0deg,#34d399 180deg,transparent 180deg,transparent 360deg)}.bg-\[conic-gradient\(white_0deg\2c white_300deg\2c transparent_270deg\2c transparent_360deg\)\]{background-image:conic-gradient(white 0deg,white 300deg,transparent 270deg,transparent 360deg)}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:z-\[80\]::before{content:var(--tw-content);z-index:80}.before\:aspect-square::before{content:var(--tw-content);aspect-ratio:1 / 1}.before\:w-\[60\%\]::before{content:var(--tw-content);width:60%}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.before\:animate-\[spin_2s_linear_infinite\]::before{content:var(--tw-content);animation:spin 2s linear infinite}.before\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\:bg-\[conic-gradient\(white_0deg\2c white_270deg\2c transparent_180deg\2c transparent_360deg\)\]::before{content:var(--tw-content);background-image:conic-gradient(white 0deg,white 270deg,transparent 180deg,transparent 360deg)}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:z-\[60\]::after{content:var(--tw-content);z-index:60}.after\:aspect-square::after{content:var(--tw-content);aspect-ratio:1 / 1}.after\:w-3\/4::after{content:var(--tw-content);width:75%}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.after\:animate-\[spin_3s_linear_infinite\]::after{content:var(--tw-content);animation:spin 3s linear infinite}.after\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\:bg-\[conic-gradient\(\#065f46_0deg\2c \#065f46_180deg\2c transparent_180deg\2c transparent_360deg\)\]::after{content:var(--tw-content);background-image:conic-gradient(#065f46 0deg,#065f46 180deg,transparent 180deg,transparent 360deg)}