HTML + CSSLoaders
Dots to line loader
Five dots that slide together into a single rounded line, change color, then pull apart again.
Settings
72px
1x
Code
<div class="ul-dl"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></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
Dots joining into one line feel like things connecting, so this loader fits sync and pairing moments: linking a smartwatch to its app, connecting a card terminal from a shop’s back office or syncing notes between devices. It is wide and flat, which lets it sit neatly inside a button or under a heading.
Save it for short waits of a few seconds, where the merge and split play once or twice. Choose a second color that feels like a “connected” state, like your brand green or blue, so the line reads as success.