unvibed.
Menu
Free UI audit
All motion techniques

Determinate progress.

Check three print separations and see progress advance with each completed inspection. The total is the number of checked plates.

Check each separation

0 of 3 checked

Resting states
No plates checked → Three plates checked
Reduced motion
The count and progress indicator step directly to the confirmed total.

Implementation excerpt

<progress aria-label="Separations checked" value={count} max={3} />

Where Unvibed uses it

The film’s progress indicator uses elapsed playback time and the recorded duration. The delivery film

Related design directions