ProgressBar

A ProgressBar is a simple chart that can be used to show how complete something is, or visualize parts that make up a whole.

Page navigation navigation

When rendering multiple segments, the segment colors should have a 3:1 contrast ratio with colors of adjacent segments.

ProgressBars 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 ProgressBar value is already shown as text adjacent to the ProgressBar, don't use a redundant label for the ProgressBar.