JSFiddle - React, Tailwind, and code Playground
HTML
<div class="line">
<div class="dot">
</div>
<div class="dot" style="animation-delay: 2s">
</div>
<div class="dot" style="animation-delay: 4s">
</div>
<div class="dot" style="animation-delay: 6s">
</div>
<div class="dot" style="animation-delay: 8s">
</div>
</div>
SASS
.line
display: flex
gap: 8px
.dot
animation-duration: 10s
animation-name: pulse
animation-iteration-count: infinite
animation-timing-function: ease-in-out
border-radius: 8px
width: 8px
height: 8px
background-color: salmon
@keyframes pulse
from
transform: scale(1)
10%
transform: scale(1.5)
20%
transform: scale(1)