Progress
A labelled bar. Tabular value. Determinate when you know.
Spec
- Visible label, or
aria-labelif the label is visually nearby already. - Value uses tabular nums.
- Thickness 4px or 8px.
- Determinate:
role="progressbar"witharia-valueminmaxnow. - Indeterminate: opacity pulse 180ms. Not a fake percent.
- Reduced: static. No pulse.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Determinate — click Run export
Indeterminate pulse, not a fake %
4px track
Do / Don't
| Do | Don't |
|---|---|
| Determinate when you have a value. | A looping bar labelled 73% you invented. |
| Tabular 38%. | Proportional oldstyle numbers that jump. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| width | 180ms --dur-base | --ease-out | value | instant |
| opacity pulse | 180ms --dur-base | --ease-out | unknown | static |
Never flash more than three times per second. The pulse is a gentle opacity, not a blink.
Accessibility
aria-valuenow/min/maxon determinate. Indeterminate omitsvaluenowor leaves it unset.- Name the job: “Export”, not “Progress”.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.