💠 Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Usage

The Progress component visually represents the completion percentage of a task or process, providing users with feedback on their progress. It's typically displayed as a progress bar that fills horizontally as the task advances.

The Progress component is a determinate indicator, meaning it should be used when the length of the task is known and measurable.

When to use

• Task completion feedback: Use a Progress component to give users immediate feedback on the completion of a process, such as file upload or download progress.
• Step-by-step processes: Employ a Progress component in multi-step processes to indicate how far along the user is and how much is left, such as during checkout or in a survey.
• Loading content: Utilize a Progress component for loading content when you can determine how long the process will take or how much content needs to be loaded.
• Educational and training contexts: Progress bars can be used to motivate and inform users during educational or training modules, showing how they are advancing through the material.

Avoid using Progress components for indeterminate processes where the time to completion is unknown; in such cases, an indeterminate loader or spinner might be more appropriate.

Examples

Default

Brand

Danger

Warning

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the progressbar role requirements (opens in a new tab).