Progress bar
A progress bar shows the status of a system process.
When to use
- Work that is running and will end, such as an upload, an import or a long save.
- Work that takes long enough that people might wonder whether anything is happening.
- Anywhere you can report how much is done. A bar with a value is more useful than one without.
When not to use
- A quantity measured against a limit. That is a meter, which shows a state, not a process.
- Work that finishes almost at once. A bar that flashes up and disappears is distracting.
- Moving through a series of steps. That is a progress tracker or a progress indicator.
Guidance
Do
Show the real value whenever you have it. Knowing the work is two fifths done helps people decide whether to wait.
Don't
Do not show an indeterminate bar when you know the value. How much is done is what people want to know.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| progress-bar | brand-bold | 0.460Marked | 0.598Marked |
| progress-bar | neutral | 0.042Ambient | 0.066Substrate |
| progress-bar--inverse | track-inverse | 0.124Ambient | 0.189Ambient |
| progress-bar--inverse | surface | 0.000Substrate | 0.000Substrate |
| progress-bar--success | lime-bold | 0.450Marked | 0.695Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- Name the work as it happens. Uploading files, not Upload.
- Do not put a percentage in the label. The bar shows the value, and the two can get out of step.
- When the work finishes, say so. Do not leave a full bar with no message.