پیشنمایش زنده
کد HTML
<div class="w-full gap-x-2 flex justify-center items-center">
<div
class="w-5 bg-[#d991c2] animate-pulse h-5 rounded-full animate-bounce"
></div>
<div
class="w-5 animate-pulse h-5 bg-[#9869b8] rounded-full animate-bounce"
></div>
<div
class="w-5 h-5 animate-pulse bg-[#6756cc] rounded-full animate-bounce"
></div>
</div>
کد CSS
.flex{display:flex}.h-5{height:1.25rem}.w-5{width:1.25rem}.w-full{width:100%}@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}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.items-center{align-items:center}.justify-center{justify-content:center}.gap-x-2{column-gap:0.5rem}.rounded-full{border-radius:9999px}.bg-\[\#6756cc\]{--tw-bg-opacity:1;background-color:rgb(103 86 204 / var(--tw-bg-opacity))}.bg-\[\#9869b8\]{--tw-bg-opacity:1;background-color:rgb(152 105 184 / var(--tw-bg-opacity))}.bg-\[\#d991c2\]{--tw-bg-opacity:1;background-color:rgb(217 145 194 / var(--tw-bg-opacity))}