Skip to main content

Progress Bar

A progress bar is a visual element that represents the progress or completion status of a task, process or operation.

Dos and Don'ts

Do
  • 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, such as a percentage.
  • To visually show the progression of a system operation such as downloading, uploading, loading data, submitting a form, or saving updates.
  • To convey that data is being requested, transferred, or processed.
Don't
  • When manual user actions are required to progress, use the Progress Stepper instead.
  • If the process takes longer than 5 seconds to load, use the Spinner instead.

Anatomy

Annotated diagram of a progress bar component showing its main parts: form label, progress line, track, assistive text, help icon, trailing text, and leading icon.
  1. Form label (Optional): The form label provides clear and concise information to describe the contents of the field.
  2. Progress line: Visually illustrates the current progress.
  3. Track (Optional): Flexible width determined by the designer or available screen space.
  4. Assistive text (Optional): The assistive text provides additional instructional information, as well as error and success messages.
  5. Help or info tooltip icon (Optional): A small interactive icon users can tap to see extra information about the progress bar content.
  6. Optional trailing text (Optional): A text label aligned to the end of the progress bar to inform the user the field is optional.
  7. Leading icon (Optional): Leading icon that visually supports the label.

Variants

Default

Determinate progress bars fill the container from 0 to 100%. This reflects the progress of the process.

A determinate progress bar showing a filled progress line at approximately 60% completion.

Indeterminate

Indeterminate progress bars display movement along the container until the process is finished.

An indeterminate progress bar showing an animated segment moving along the track to indicate an ongoing process.

Modifiers

Colour

Secondary

A progress bar using the secondary colour variant.

Brand

A progress bar using the brand colour variant.

Track

The progress bar's track is removable for specific use cases, but this should not be the default. When the track is removed, the progress bar must reside within a fixed-width container that visually indicates its potential full width. This choice requires careful consideration.

The track and form label cannot be simultaneously removed; one must be present at all times.
A progress bar with the track removed, showing the progress line without a background track.

Label with leading icon

The leading icon is available within the form label nested component. By default the colour of the leading placeholder icon is the same as the text. The colour of the placeholder icon can be overridden.

A progress bar with a leading icon displayed to the left of the form label.

Examples

LTR example

Here are some examples of a progress bar in LTR context.

Examples of progress bar in a left-to-right layout, showing various configurations.
Further examples of progress bar in a left-to-right layout.

RTL example

Here are some examples of a progress bar in RTL context.

Examples of progress bar in a right-to-left layout, showing various configurations mirrored.
Further examples of progress bar in a right-to-left layout.
Back to top