پیش‌نمایش زنده
کد 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))
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06