Progress

Selector

progress

The progress bar is used to show the progress or status of a task. The progress bar comes in two variations: determinate and indeterminate. Use the determinate progress bar if you have access to the progress of the task. Provide the min, max, and value attributes to render the progress bar at the correct step. You can also provide content inside of the progress as fallback content for browsers that don't support the progress bar.

Use the indeterminate progress bar for tasks where the progress is not known. To render, omit all of the attributes (min, max, and value).

To label the progress bars, it is better to use the aria-labelledby attribute pointing to the label text. Using label[for] is sometimes recommended but it unfortunately isn't consistent in how screen readers treat it. For example, VoiceOver does not link the two.

The indeterminate progress bar respects the "prefers reduced motion" media query. It will switch automatically depending on the user's preference, but you can use the .no-animation class to force the animation-less variation as well.

In most cases, the progress bar will be used to indicate the status of another part of the page. To describe other regions with the progress bar, use the aria-describedby attribute pointing to the label of the progress element to semantically link the two.