Anime Bouncing Dots Loader
anime.jsの弾性イージングでドットが弾むようにバウンスするローダー。
HTML
<div class="abdl-wrap"> <div class="abdl-dot"></div> <div class="abdl-dot"></div> <div class="abdl-dot"></div> <div class="abdl-dot"></div> </div>
CSS
.abdl-wrap {
display: flex;
gap: 8px;
align-items: flex-end;
height: 40px;
}
.abdl-dot {
width: 10px;
height: 10px;
background: #6366f1;
border-radius: 50%;
}
JavaScript
anime({
targets: '.abdl-dot',
translateY: [-20, 0],
duration: 600,
easing: 'easeOutBounce',
delay: anime.stagger(120),
loop: true
});