Progress
How far along a task is: a thin bar, a label and a value. It’s a native progress element, so screen readers announce it.
- CSS
css/components/progress.css
01 — Variants
Known length
A label, the value and an optional hint. The bar is the text color by default.
About a minute left
Unknown length
Leave out value and a segment sweeps across. It holds still for people who prefer reduced motion. .progress--accent uses the accent.
Success and warning
.progress--success and .progress--warning use the status colors, for a quota or a rollout.
Close to the limit of 4 GiB.
Error and thick
.progress--error for a task that stopped; .progress--thick for a 6px bar.
Connection lost. Retry when you’re back online.
02 — Usage
Use it for
- Uploads, imports and anything that takes more than a couple of seconds.
- Set the value from a script:
bar.value = 72.
Avoid
- Short waits. A busy button is enough.
- Showing a score or a quota. That’s a stat.
03 — Accessibility
Notes
- A native
<progress>with a<label>; screen readers read the percentage.