Progress bar
A progress bar communicates 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 long enough that someone would otherwise wonder whether anything is happening.
- Anywhere you can report a fraction, because a bar that knows how far along it is beats one that does not.
When not to use
- A quantity against a ceiling. That is a meter, which describes a state rather than a process.
- Work that finishes almost at once. A bar that flashes is noise.
- A journey through steps. That is a progress tracker or a progress indicator.
Guidance
Do
Report a real fraction whenever you have one. Knowing it is two fifths done is the difference between waiting and worrying.
Don't
Do not run indeterminate when the fraction is known. It throws away the only thing the reader wanted.
Intensity
What each of this component's grounds spends, measured 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, and Demanded is declared and rationed, so neither is a property this component carries by itself. 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 carries the value, and the two drift apart.
- Say what finished when it finishes, rather than leaving a full bar with no word.