Progress bar visualizes one or more parts of a whole.
On this page
On this page
A progress bar is a simple chart that can be used to show how complete something is, or visualize parts that make up a whole.
When using multiple segments, use colors that are easy to tell apart and include a legend that identifies what each segment represents.
Default to pairing the progress bar with text that explicitly shows the value(s) of the filled segment(s). Text values are not explicitly required, but should only be omitted when the progress is intentionally vague.
Limit the number of segments.
Don't overload a progress bar with too many segments.
When using multiple segments, avoid overwhelming users by with too many segments. This is especially important for narrow progress bars. Consider a different kind of chart for these cases.
A progress bar may use segments to represent multiple parts of a whole.
The color of the filled part(s) of the progress bar may be customized. Default to using
success.emphasis for a progress bar that only shows a single segment.
The size may be adjusted to adapt the progress bar to different contexts.
- Medium (default)
By default, a progress bar will fill it's parent. However, a progress bar can be any width.
When rendering multiple segments, the segment colors should have a 3:1 contrast ratio with colors of adjacent segments.
Progress bars can only be interpreted by sighted users. Include a text description to support assistive technologies like screen readers.
For example, "tasks: 8 of 10 complete" for a single segment, or "tasks: 80 done, 14 in progress, 6 open" for multiple segments.
If the progress bar value is already shown as text adjacent to the progress bar, don't use a redundant label for the progress bar.View open accessibility issues related to this component