Progress bar

A progress bar is a graphical representation of a (task) completion status.

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.

Horizontal linear process bar

Horizontal linear process bar

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.

Determinate

Determinate progress bar

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.

Indeterminate

Indeterminate progress bar

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.

1. Segmented horizontal, 2. Segmented vertical

1. Segmented horizontal, 2. Segmented vertical

General construction

1. Label, 2. Description, 3. Indicator, 4. Background track

1. Label, 2. Description, 3. Indicator, 4. Background track

5. Error message, 6. Status icon

5. Error message, 6. Status icon

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, 2. Large

1. Small progress bar, 2. Large progress bar
  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

1. Default, 2. Inline alignment, 3. Indent style, 4. Centered

1. Default, 2. Inline alignment, 3. Indent style, 4. Centered

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.

1. Idle state, 2. Active state, 3. Success state, 4. Error state

1. Idle state, 2. Active state, 3. Success state, 4. Error state

Percent or time-based labels

Percent based labels

Use percent labels (the value changes over time) for operations that might take ~10 seconds or more.

Time based labels

Use time estimates for operations that may 1 minute or more.

Dos & Don’ts

The progress bar fills the area

The progress bar doesn't fill the area

The progress bar should fill the area it belongs to so that the user immediately recognizes its relationship to the content.

Progress bar with a general time estimate.

Progress bar with an accurate time estimate.

Provide a general time estimate if possible. When it comes to time estimates, you don't have to be particularly accurate, especially if the value cannot be exactly calculated.

Style

This chapter shows different progress bar styles in the User Experience Toolkit

Overview

Determinate

Determinate progress bar

Indeterminate

Indeterminate progress bar

Progress bar with states

1. Idle state, 2. Active state, 3. Success state, 4. Error state

Progress bar heights

1. Small progress bar, 2. Large progress bar

Segmented

Segmented progress bar

Text alignment

Text alignment

1. Default, 2. Inline alignment, 3. Indent style, 4. Centered

Examples

Example in sidebar small size

Indent style example in sidebar

Large Size example in loading screen

Size example loading screen
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top