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.

Text in loader components

If the waiting time is long enough, you can show a text explaining to the user what

  • is happening or will happen
  • we (the bank's system) are doing
  • the customer soon will know or see.

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 200

Styles

Progress bar - styles