پیشنمایش زنده
کد HTML
<div class="loader border-t-2 rounded-full border-yellow-500 bg-yellow-300 animate-spin
aspect-square w-8 flex justify-center items-center text-yellow-700">£</div>
کد CSS
.flex {
display: flex
}
.aspect-square {
aspect-ratio: 1 / 1
}
.w-8 {
width: 2rem
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
.animate-spin {
animation: spin 1s linear infinite
}
.items-center {
align-items: center
}
.justify-center {
justify-content: center
}
.rounded-full {
border-radius: 9999px
}
.border-t-2 {
border-top-width: 2px
}
.border-yellow-500 {
--tw-border-opacity: 1;
border-color: rgb(234 179 8 / var(--tw-border-opacity))
}
.bg-yellow-300 {
--tw-bg-opacity: 1;
background-color: rgb(253 224 71 / var(--tw-bg-opacity))
}
.text-yellow-700 {
--tw-text-opacity: 1;
color: rgb(161 98 7 / var(--tw-text-opacity))
}