Progress bar

A visual representation of progress for loading content

Short description

There are two types of indicators/bars:

  • Determinate. Indicating the percentage of loaded content. (Indicating progress, 0-100%)
  • Indeterminate. Does not show how long nor how much of the content is loaded. (Requesting info)

An indeterminate progress indicator can result into a determinate state, but not the other way around.

 

Progress bar

 

When and how to use it

A determinate progress indicator can be used to show actual progress in a multipage flow (wizard) when viewport size is limited.

Use an indeterminate indicator when loading content within a page, widget or module.

Multiple indicators can be shown at the same time to indicate that different content areas are loading. They can also be queued in a sequence to show how additional content is loading, i.e. when expanding a row to show its details.

Behaviour

Progress indicators should behave the same way regardless of device or resolution.

Do's and don'ts

Do

  • Use a progress indicator to give the user a visual cue when content is loading
  • Add a determinate indicator as part of input field validation, enforcing the understanding of when the requested value is fulfilled.

Don't

  • Refrain from adding progress indicators for all sub items, try instead to show one per content area.

 

Specification

Colour

  • Active line: Green
  • Inactive line: Grey 8

Styles

Progress bar - styles