پیشنمایش زنده
کد HTML
<div class="flex flex-row gap-2">
<div class="w-4 h-4 rounded-full bg-blue-700 animate-bounce"></div>
<div class="w-4 h-4 rounded-full bg-blue-700 animate-bounce [animation-delay:-.3s]"></div>
<div class="w-4 h-4 rounded-full bg-blue-700 animate-bounce [animation-delay:-.5s]"></div>
</div>
کد CSS
.flex{display:flex}.h-4{height:1rem}.w-4{width:1rem}@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}.flex-row{flex-direction:row}.gap-2{gap:0.5rem}.rounded-full{border-radius:9999px}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.\[animation-delay\:-\.3s\]{animation-delay:-.3s}.\[animation-delay\:-\.5s\]{animation-delay:-.5s}