Progress Indicator
Communicating how far through something the user is, which requires honesty about what you can measure.
Definition
Progress indicators show either determinate progress, where completion is measurable, or indeterminate activity, where it is not. Choosing the wrong one misleads.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Operations over about a second.
- Multi-step flows.
- File uploads and background jobs.
Common mistakes
- Fabricated progress.
- Percentages with no relationship to real work.
- Progress that reverses.
Rules
- Use determinate progress only when you can genuinely measure it. A fake progress bar that stalls at 90 percent destroys trust.
- For step indicators, show step names rather than only numbers, and mark completed, current and remaining states distinctly.
- Describe the current activity alongside the bar. 'Uploading 3 of 12 files' is far more useful than a percentage.
- Use role progressbar with aria-valuenow, aria-valuemin and aria-valuemax, or the native progress element.
- Never let progress go backwards. If an estimate was wrong, slow it rather than reversing it.
Choosing the indicator
| Situation | Indicator | Note |
|---|---|---|
| Under about one second | Nothing | A flash of spinner reads as a glitch |
| One to four seconds, unknown length | Indeterminate spinner | Keep it in the region that is loading |
| Layout known, content coming | Skeleton | Prevents the shift that a spinner causes |
| Measurable work | Determinate bar with a percentage | Only if the number is honest |
| Multi-step process | Step count, such as 3 of 7 | More meaningful than a percentage |
| Over about ten seconds | Progress plus what is happening | And a way to leave and come back |
In practice
- i.
The bar that stopped at ninety
Dishonest progressA bar that races to ninety percent and waits there teaches readers that progress means nothing. An indeterminate indicator would have been more honest and less damaging.
- ii.
Three of seven
Steps beat percentagesPeople can act on a step count: they know roughly what each step costs because they have done two. A percentage derived from bytes or tasks maps onto nothing they can feel.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Skeleton Screens
PatternPlaceholder shapes in the layout of the content that is loading.
Key difference
A skeleton says what is coming and where it will sit. A progress indicator says how far along the work is. Only use progress when you can honestly measure it; a skeleton never claims to know.
Use Progress Indicator when
- Completion is genuinely measurable, as in an upload or an import.
- The wait is long enough that the reader needs an estimate.
- There is no layout to stand in for, only work to report.
Use Skeleton Screens when
- The layout is known before the data is.
- The wait is short and the page would otherwise shift.
- Several regions arrive independently.
Local chart
CMP·026 · Region III · Grid F2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Visibility of System StatusHEUR·001 · Heuristic
- Doherty ThresholdLAW·006 · Law
- Goal-Gradient EffectLAW·014 · Law
- Parkinson's LawLAW·013 · Law
- Zeigarnik EffectLAW·010 · Law
- ContinuityFND·008 · UI foundation
Often used with
These usually appear in the same screen or the same decision.
- StepperCMP·029 · Component
- Loading StatesPAT·011 · Pattern
- Multi-Step FlowsPAT·016 · Pattern
Related concept
Connected closely enough to change how you apply this.
- Loading and Progress CopyWRT·011 · UX writing