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 page
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.
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 StatusHeuristic
- Doherty ThresholdLaw
- Goal-Gradient EffectLaw
- Parkinson's LawLaw
- Zeigarnik EffectLaw
- ContinuityUI foundation
Often used with
These usually appear in the same screen or the same decision.
- StepperComponent
- Loading StatesPattern
- Multi-Step FlowsPattern
Alternative approach
A different answer to the same problem, with a different cost.
- Skeleton ScreensPattern
Skeletons suit unknown layouts arriving. Determinate progress suits known work.
Related concept
Connected closely enough to change how you apply this.
- Loading and Progress CopyUX writing