پیشنمایش زنده
کد HTML
<div class="flex-col gap-4 w-full flex items-center justify-center">
<div
class="w-20 h-20 border-4 border-transparent text-blue-400 text-4xl animate-spin flex items-center justify-center border-t-blue-400 rounded-full"
>
<div
class="w-16 h-16 border-4 border-transparent text-red-400 text-2xl animate-spin flex items-center justify-center border-t-red-400 rounded-full"
></div>
</div>
</div>
کد CSS
.flex{display:flex}.h-16{height:4rem}.h-20{height:5rem}.w-16{width:4rem}.w-20{width:5rem}.w-full{width:100%}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-4{gap:1rem}.rounded-full{border-radius:9999px}.border-4{border-width:4px}.border-transparent{border-color:transparent}.border-t-blue-400{--tw-border-opacity:1;border-top-color:rgb(96 165 250 / var(--tw-border-opacity))}.border-t-red-400{--tw-border-opacity:1;border-top-color:rgb(248 113 113 / var(--tw-border-opacity))}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity))}