پیشنمایش زنده
کد HTML
<div class="flex flex-row gap-2">
<div
style="background-image: conic-gradient(from 0deg, violet, indigo 30%, blue 50%, green 60%, yellow 70%, orange 80%, red 100%);"
class="w-14 h-14 rounded-full bg-radial bg-gradient-to-tr animate-spin [animation-delay:.7s]"
></div>
</div>
کد CSS
.flex {
display: flex;
}
.h-14 {
height: 3.5rem;
}
.w-14 {
width: 3.5rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.flex-row {
flex-direction: row;
}
.gap-2 {
gap: 0.5rem;
}
.rounded-full {
border-radius: 9999px;
}
.bg-gradient-to-tr {
background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.\[animation-delay\:\.7s\] {
animation-delay: 0.7s;
}