← All elements
<div class="bd"><i></i><i></i><i></i></div>About this loader
Three dots that hop in sequence using staggered animation delays on a shared keyframe.
How it works
Three circles share one keyframe that translates them upward, and alternate direction makes them fall back down. The second and third are delayed by 0.15 and 0.3 seconds so the bounce travels along the row.
Ways to customise it
- Change the three colours.
- Raise 32px for a higher hop.
- Shorten .7s for a faster loader.
Good to know
Pair it with visible text or an aria-live status such as Loading. Reduced motion users see static dots.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.