پیشنمایش زنده
کد HTML
<div class="relative">
<div class="w-20 h-20 border-lime-200 border-2 rounded-full"></div>
<div class="w-20 h-20 border-lime-700 border-t-2 animate-spin rounded-full absolute left-0 top-0"></div>
</div>
<div class="relative">
<div class="w-10 h-10 border-lime-200 border-2 rounded-full"></div>
<div class="w-10 h-10 border-lime-700 border-t-2 animate-spin rounded-full absolute left-0 top-0"></div>
</div>
<div class="relative">
<div class="w-5 h-5 border-lime-200 border-2 rounded-full"></div>
<div class="w-5 h-5 border-lime-700 border-t-2 animate-spin rounded-full absolute left-0 top-0"></div>
</div>
کد CSS
.absolute {
position: absolute
}
.relative {
position: relative
}
.left-0 {
left: 0px
}
.top-0 {
top: 0px
}
.h-10 {
height: 2.5rem
}
.h-20 {
height: 5rem
}
.h-5 {
height: 1.25rem
}
.w-10 {
width: 2.5rem
}
.w-20 {
width: 5rem
}
.w-5 {
width: 1.25rem
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
.animate-spin {
animation: spin 1s linear infinite
}
.rounded-full {
border-radius: 9999px
}
.border-2 {
border-width: 2px
}
.border-t-2 {
border-top-width: 2px
}
.border-lime-200 {
--tw-border-opacity: 1;
border-color: rgb(217 249 157 / var(--tw-border-opacity))
}
.border-lime-700 {
--tw-border-opacity: 1;
border-color: rgb(77 124 15 / var(--tw-border-opacity))
}