The progress bar displays a horizontal indicator to show percentage complete/remaining.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| displayError | bool | - | false | badNews will change the progress bar color to red |
| max | number | string | - | 100 | max |
| min | number | string | - | 0 | min |
| leftLabel | string | - | - | left label |
| progress | number | string | - | - | string data for progress |
| rightLabel | string | - | - | right label |
| topLabel | string | - | - | top label |
Usage
The progress bar component helps users visualize two relative percents, to show how much is remaining or complete. Group traffic allocation, Optimizely trial % remaining, and product usage bars are all good examples of the progress bar component in use.
Best Practices
Do
Limit your use of this component to once per page
Don't
Never use this as a loading indicator, see Spinner and ProgressDots for that