پیش‌نمایش زنده
کد HTML
<div class="loader border-r-2 rounded-full border-yellow-500 bg-yellow-300 animate-bounce
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 bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1)
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1)
  }
}

.animate-bounce {
  animation: bounce 1s infinite
}

.items-center {
  align-items: center
}

.justify-center {
  justify-content: center
}

.rounded-full {
  border-radius: 9999px
}

.border-r-2 {
  border-right-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))
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06