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.

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.

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