Loader ​

Overview

The loader animation is useful to notify users of the background process that might take a few moments before showing the information they requested. The spinning loader has two variants, one for light background and another for a darker background.

Usage guidelines ​

When to use ​
  • For actions that can't be performed directly and take time to process.
  • Only show a loader if the expected wait time is more than a second.
When not to use ​
  • Do not use more than one loader on a page at a time.

Writing guidelines ​

  • Loader: The loader text explains what is currently happening when you see a loader animation.

  • Language: Use simple and clear language.

  • Text length: Don't write more than 2-3 words.

Accessibility ​

Design considerations ​

Color ​
  • Loaders must have appropriate contrast against the surrounding background. All the predefined background colors comply with accessibility WCAG AA guidelines.
  • Don't rely on color only to communicate meaning so make sure the text of the loader is self-evident.
  • A loader should contain help text that explains what is happening or should include an audible message for screen readers.
Screen reader ​
  • When the loader is active - an audible message: "Content is loading".
  • When the loader is done loading - an audible message: "Content is loaded".

Specifications ​

Anatomy ​

Anatomy
  • Loading animation: indicates that something is being processed
  • Chip label: Provides a short keyword to describe the item.

Sizes ​

The loader is available in two sizes/ versions:

Loader is animated in a size of 24px x 24px.
Loader is animated in a size of 55px x 55px plus the loading text (Caption/14/Medium).

Styling ​

Loaders are available in dark and light.

When you choose a loader, make sure it stands out from the background and complies with accessibility guidelines.

Dark
Light
Select a color theme that stand out from the background.
Loaders must have appropriate contrast against the surrounding background.

Behavior ​

Positioning/Alignment ​

Loaders are typically placed in the middle of the page/component
Do not use more than one loader on a page at a time.

Interaction ​

This is a non-interactive UI element. Loaders animate as soon as user action is done and disappear once the loaded content appears.