← All effects
Percentage Counter
0%
-- fps
prefers-reduced-motion detected — shows 100% directly
X-ray · layers
fast start, gentle landing
the number swells as it climbs
a snap of overshoot at 100
Parameters
Duration1800 ms
Pause at 1001200 ms
Growth0.20
Pop size1.18×
your version · updates as you tinker
How this effect works
A counter that just ticks 1, 2, 3… at constant speed feels bureaucratic. The fix is the easing layer: progress runs through 1 − (1 − t)³, so the number sprints through the boring early range and decelerates into the reveal — the last ten percent take as long as the first fifty. That borrowed suspense is the entire psychology of a good preloader.
The grow layer scales the digits up slightly as progress climbs — the number literally gains weight as it nears completion. And the pop is the punctuation mark: at 100 the scale snaps past its resting size and springs back in a couple of frames. It's the visual equivalent of a "done!" — without it the counter just… stops, and stopping is not an ending.
Production notes: respects prefers-reduced-motion (renders 100% immediately) · one textContent write and one transform per frame · in production, drive the target from real loading progress and let the easing smooth it · the copied snippet is self-contained HTML + CSS + JS.