Jumping dots with shadow
Three dots jumping in a wave, each with a little shadow on the floor that shrinks as it rises.
Settings
Code
<div class="ul-bn"><i style="--i:0"><b></b></i><i style="--i:1"><b></b></i><i style="--i:2"><b></b></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
Where to use it
The tiny shadows are what make this one charming: they shrink as each dot leaves the ground, so the jump feels physical. It suits playful brands, like a kids’ learning app, an online toy shop or the booking page of a board game café. Next to a chat typing indicator, it reads more as “fun” than “someone’s writing”.
The shadow needs a floor to sit on, so use it on plain backgrounds rather than photos. Rounded, friendly typography around it helps. Bump up the size a little; at very small sizes the shadows disappear and so does the charm.