Anatomy
The Progress Bar consists of four primary elements that work together to visually represent the completion of a task.
- Label
- Fill
- Track
- Status Indicator
Options
The Progress Bar supports the following configurations to accommodate various progress representation scenarios.Status
| Status type | Description |
|---|---|
| Info (Default) | Used to convey the general use of the Progress Bar |
| Success | Optionally used to denote the completion of the Progress Bar. |
| Error | Used to convey that something went wrong with the operation. |
Value
A numeric value visually changes the progression. Use this when the actual percentage of completion can be determined.
Indeterminate
Set an indeterminate value when it isn’t well known how long an operation will take.
Label
Label
More Info
No Label
Description And Error Text
Behavior
The Progress Bar responds to content overflow by wrapping text labels while maintaining consistent visual representation.Overflow
The text label of a Progress Bar will wrap when not enough space is provided.
Usage Guidelines
Use the Progress Bar to show the progression of a system operation.When to Use
Progress Bars are best used to show the progression of a system operation. This can include things such as downloading, uploading, and progress on a submission.
Do
Don’t use for data visualizations
Progress Bar’s scope is limited to system operations. It should not be extended to contexts such as dashboard analytics and flow progression.
Don’t
Don’t use to denote steps
Progress Bar should not be used to convey steps in a flow. Use the Stepper instead.
Don’t
How to Use
Use only the colors provided
Progress Bars only support visual states for info, success, and error. Don’t restyle the Progress Bar individually unless part of a wider theming.
Don’t
Setting a value
In general, it is preferable to provide accurate reading of progression. This type of data however is frequently unavailable or unreliable. Some considerations:- If progression can be roughly estimated and still be accurate, set a value.
- If accuracy is not realistic, the indeterminate state is preferable over an inaccurate value.
- If it’s not possible to know at the start, but during processing an estimate can be made, the progress bar can start as indeterminate but become a set value.
Content
Content within the Progress Bar should clearly communicate the task being completed and its current status.Keyboard Interaction
Users can navigate the Progress Bar using standard keyboard controls.Accessibility
Provide ARIA labels when a visual label is not used
When using a Progress Bar without a label, provide one through the usage of anaria-label.
For more guidance on progress indicators and status updates, see changing content best practices.