Specifications
- A progress indicator is represented by a white bar that is filled with color over time as loading occurs.
- Height: 16px
- Border: 1px solid
Small variant
A smaller version is available with same specs as above except, Height: 8px.
Extra Small variant
An extra small version is available with same specs as above except, Height: 4px.
Indeterminate State
An animated indeterminate state can be used be if the current progress can not be determined.
Colors
| Element | Property | Color |
|---|---|---|
| Progress Bar | Fill |
#0063a3
#019aeb
|
| Background |
#ffffff
#252a2e
| |
| Border |
#6a6e79
#6a6e79
|
Behaviors
- A progress indicator should fill up to completion as background loading tasks are complete.
- Whenever possible, show the user a textual representation of their progress that corresponds to the loading indicator.
Completed 40 of 50.