Progress Bar

Components

Progress Bar

A horizontal bar that indicates the current completion status of a long-term process, usually continuously updated as the process progresses, rather than in small steps.

Preview

Figma

Uses

When to use

For a long operation or a process that can take a considerable or unknown amount of time.

When the process can be described with quantitative information.

To visually show the progression of a system operation, such as downloading, uploading, uploading data, submitting a form, or saving updates.

To communicate that data is requested, transferred or processed.

When not to use

When progress is determined by user actions, rather than system actions.

If the process takes less than 5 seconds.

Behaviour

States

Default

Error

Display of the progress bar component in a satisfactory state

Success

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The progress bar component has role="progressbar".

It has the aria-valuenow property set to a decimal value between aria-valuemin and aria-valuemax that represents the current value of the counter. Assistive technologies will present aria-valuenow as a percentage.

It has the aria-valuemax property adjusted to a decimal value greater than aria-valuemin.

Since the progress bar has a visible label, it is referred to by aria-labelledby in the element with role="progressbar".

It has tabindex="0" to make it possible to access it using the tab key or to move the focus by programming.