Loading indicator

Skip to page content

BETA

Component variants

Loading indicators have two variants: radial and linear.

Loading indicators can either be determinate or indeterminate:

Use determinate loading indicators when the percentage of completion can be determined.
Use indeterminate loading indicators when the process completion rate can't be determined.

Radial

Radial loading indicators have four sizes:

Small
Default
Large
Icon

The icon size is available for use within other components.

Interactive example

50%

Radial determinate.

Interactive example

Radial indeterminate.

Linear

Linear loading indicators have three sizes:

Small
Default
Large

Linear loading indicators have two variants:

Default
Full-width

Linear loading indicators can be set to full-width to span its container.

Interactive example

50%

Linear determinate.

Interactive example

Linear indeterminate.

When to use

Use loading indicators when loading full pages or containers where the structure is unknown.

Use determinate loading indicators wherever the percentage of completion can be calculated.

When not to use

Avoid using loading indicators when loading full pages if the structure of the page loading is known. Instead, use the skeleton component.

Content

Labels

Determinate loading indicators feature the percentage completion rate in percentage points, 0 to 100%.

Indeterminate loading indicators have a customisable label. The label can be set to change after a specified amount of time. Make sure to display each label for at least five seconds. Keep labels clear and concise. Where possible, provide specific labels to the process being performed.

A graphic of a radial loading indicator with the label of 'Submitting form...'.

Use clear, concise and specific labels.

A graphic of a radial loading indicator with the label of ‘The form is now being submitted... Please wait...’.

Don’t make labels unnecessarily long.

Layout and placement

Loading indicators always appear centred within their container. If the whole page is loading, position the loading indicator at the centre of the page. If the loading indicator is used inside another component, like a card, position the loading indicator at the centre of the component.

A graphic of a radial loading indicator positioned in the middle of a blank page.

Always centre the component.

A graphic of a radial loading indicator positioned in the top left corner of a blank page.

Don’t position the loading indicators on other parts of the page or container.

When using the full-width variant of linear loading indicators, make sure to place this at the top of the component or page. Also, make sure that the loading indicator takes up the full width of the component or page.

A graphic of a full width loading indicator at the top of a page.

Place the full width indicator at the top of the container.

A graphic of a full width loading indicator positioned in the centre of a container with a bigger width.

Don’t position full width loading indicators on other parts of the container. Make sure it has the same width of this container.

If loading indicators are overlaid on other content, place them in a dialog.

A loading indicator placed inside a modal dialog, overlaid on a page filled with content.

Place loading indicators in dialogs when overlaid on other content.

A loading indicator overlaid on a page filled with content.

Don’t place loading indicators over other content, even if changing the opacity of the background.

Last reviewed 3 February 2023 .