ProgressBar
The older 20-tall progress bar with its percent written on or beside it, for screens that still use the legacy look.
Master
Switch the value, where the label sits, and whether it shows.
Usage
Use ProgressBar only to match screens built with the older progress bar. It is one component: pass value from 0 to 100 and a label that names what is loading. The percent shows in the middle of the bar, or to its right with labelPosition="right" when the bar is narrow. valueLabel replaces the percent text, like 3 of 12 files. See contracts/progressbar.json for the full contract.
Do's
- Matching screens that still use the older progress bar: uploads, setup steps, imports with a known percent.
Don'ts
- Do not use it for waits of unknown length. Show a spinner instead.
- Do not stack several bars for one process. Use one bar with a clear label.
- Do not draw a progress bar from divs. Use this or the kit progress bar.
- Do not use raw hex.
<ProgressBar label="Upload" labelPosition="center" />