Loader โ
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 โ
- 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:
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.
Behavior โ
Positioning/Alignment โ
Interaction โ
This is a non-interactive UI element. Loaders animate as soon as user action is done and disappear once the loaded content appears.