Short description

There are three types of progress bars, both often used in smaller viewports:

Determinate

Indicates how much content is loaded (0-100%)

Contextual determinate

Indicates how much content is loaded (0-100%) plus a label presenting e.g. how much has been loaded

Indeterminate

Shows that content is loading

When and how to use it

Determinate

Use this indicator when loading content within a page, widget or module. It indicates that content is loading and visualises the process from 0% to 100%.

Contextual determinate

Use this indicator when loading content within a page, widget or module. It indicates that content is loading and visualises the process from 0% to 100%. In addition to the bar you are able to highlight how much something has been loaded.

Indeterminate

Use this indicator when loading content within a page, widget or module. It indicates that content is loading, but does not show how much is loaded.

Behaviour

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

Multiple indicators can be shown at the same time to indicate that different content areas are loading. It is possible to use an indeterminate bar that results in an determinate bar (but not the other way around).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.

Copy

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

• Give the user the user a visual cue when content is loading
• Add as part of input field validation, enforcing the understanding of when the requested value is fulfilled.

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

States

• Active line: Green
• Inactive line: Grey 200

Colours

• Green
• Grey 200