Progress bar

Usage

When to use

Use a progress bar in the following cases:

• To visually represent the completion of a task or operation.
• For a process or procedure that may take a significant or unknown amount of time to complete.
• To visually represent the sequence of a system operation, e.g. downloading, uploading, loading data.
• To show that data is being requested, transmitted or processed.
• When a user needs to track a specific task or process.

Avoid using a progress bar in the following cases:

• When it is meant to guide the user through an interactive process, e.g. a multi-step form (better use a stepper).
• When the process is too fast to be actually perceived (better use a message, a badge or a similar component to convey a successfully finished process).

Types

The following progress bar types are available:

Horizontal progress bar

A progress bar displays progress in a linear horizontal direction or along a line to indicate that the application is progressing.

Determinate and indeterminate progress bars

Use a determinate progress indicator when the information about the progress is clear. The progress can be tracked and translated into an indicator which fills the track or circle from 0% to 100% and never decreases in value or resets.

Use an indeterminate progress indicator when the information about the progress is unclear, the loading progress is unknown or the amount of waiting time can’t be calculated.

Segmented progress bar

A segmented progress indicator is a visual representation of a user’s progress through a series of steps leading to the completion of a particular process. It is best suited for clear and distinct stages or steps that the system is completing. In situations where the user needs to complete specific steps through explicit interaction, use the Stepper component instead.

Global progress bar

A global progress bar is an element that stays at the top of the main region of the screen and is used to display the status of lengthy processes such as extensive file uploads. It is particularly useful when users needs to continue using other parts of the app without being blocked by the ongoing process. It should be used sparingly to avoid cluttering the interface, but can be a valuable addition to an app that involves long-running background processes.

General construction

1. Label

• The label text describes the process the progress bar refers to.

2. Description (optional)

• The description displays additional information about the process.

3. Indicator

• The indicator shows how far the process has progressed.
• In case of an error, the indicator turns into a full-width red bar.
• In case of success, the indicator turns into a full-width green bar.

4. Background track

• The background track is a static area that serves as a visual reference for the entire length and duration of the process.

5. Error message

• If an error occurs, an error message and/or error handling appears.

6. Status icon (optional)

• The status icon indicates the status of the progress bar after an error has occurred or after a task has successfully been completed.

Options

The following progress bar options are available:

Sizes

1. Small: Used when space is limited like in data table cells or side panels.
2. Large: Usually used when there is a lot of space on a page.

The width of a progress bar can vary based on its content. A progress bar should not be less than 64px wide.

Text alignment

The text alignment depends on the context and the space available. The indent style should only be used inside containers or side panels where the progress bar extends to the container’s edges.

Behavior

There are four states for the progress bar: idle, active, success, and error. After successful or unsuccessful completion of the process, a progress bar can either remain for confirmation or validation, or be automatically hidden, depending on what is most suitable for the particular use case.

Percent or time-based labels

Dos & Don’ts