Loader

Usage

Loaders should be shown when content is loading or an action is being processed. They reassure the user that their request is being fulfilled. Once the process is complete the loader should fade and be replaced by the loaded content.

Use loaders when the the wait time is unknown or anticipated to be longer than one seconds. When showing the loader as part of a state (writing or validating data), no delay should be used.

Do

• place the loader centered in the area the data is loading
• only show a spinner if the expected wait time is more than one second
• only show one loader on a page at a time. If mulitple sections are loading, consider using a large loader for the entire section instead of individual ones

When to avoid

Do not use loaders if the loading process is less than one second.

How this component works

Explain why the user is waiting

To further reduce a user’s uncertainty, offer the reason they are waiting by customising the label. For example, “Your payment is being processed” or “Loading results”.

Sizes

Loaders are available in different sizes to cater for different use cases. For example:

• Small: 24px - use for text labels or inside other UI elements, like a button.
• Medium: 32px - use for larger visual elements, like cards.
• Large: 48px, use for larer sections of a page, like charts or maps.
• Extra large: 64px, use for whole page loading.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.