← All effects

Dots Wave

LoaderVanilla JS · zero dependenciesN dots, one sine wave
-- fps
prefers-reduced-motion detected — dots shown resting

X-ray · layers

dots hop on a travelling wave
a dot grows at the top of its hop
brightness follows the wave too

Parameters

Dots3
Speed1.0×
Hop height14 px
Dot size12 px
your version · updates as you tinker

How this effect works

Every loader with dots is secretly the same machine: one wave, sampled at N points. Dot i reads the wave at sin(t × speed − i × offset) — the offset between neighbours is what makes the wave appear to travel from left to right rather than all dots hopping together. We clamp the sine's negative half to zero so each dot rests on the floor between hops; a dot that also dips below the line reads as bouncing on a trampoline, not waiting.

The other two layers re-read the same wave: swell maps it to scale, so a dot is biggest exactly at the top of its hop (things closer to you look bigger — cheap depth), and shade maps it to brightness, so attention follows the crest. This is the same "one wave, several readings" idea as Wavy Text — loaders are just the smallest possible stage for it.

Production notes: respects prefers-reduced-motion (dots rest still — the loader's presence still communicates loading) · transform + opacity only, compositor-friendly · 3 dots is the convention; 5+ starts reading as an equalizer · the copied snippet is self-contained HTML + CSS + JS.