When to use
- When loading entire pages or the primary content area after a navigation action.
- When the content load time is noticeable (typically > 1s) and might cause uncertainty without visual feedback.
- During transitions between major sections of the product where the context completely changes, such as navigating to a new application or page.
When to use something else
- For small, localized loads in Menu, Button, Card, Data grid cells, or inline lists: use Skeleton or inline spinner patterns instead.
- For background work while the user keeps working: use Progress or a subtle inline status indicator.
- For imperceptibly fast loads (< ~1s): skip the loader to avoid flicker.
- For long loads (> ~4s): prefer Progress or explicit completion messaging.
Dos and don’ts
- Do use a Page loader for full page loads, with the overlay background behind.
- Do center align the Page loader both vertically and horizontally in the content area.
- Don’t use a Page loader inside components or small containers. Use a Skeleton or spinner instead.
- Don’t use a title and description in the Page loader if the loader will not be displayed long enough for users to read the message.
- Don’t put vital information in the title or description of a Page loader.
- Don’t change any existing styling of the Page loader, such as color, animation, or speed — this is a branded element.
- Don’t alter the size or placement within the main page area.
Behavior
- Covers the targeted region (full page or main pane) until loading finishes; should not steal focus unless paired with a cancelable operation that needs attention.
Often used with
Full-page or pane skeleton UI; for indeterminate waits pair messaging with Progress when a % or cancel is available.Accessibility
- Announce loading state: Use
role="status"oraria-live="polite"so assistive technology announces that content is loading without interrupting the user’s current focus. - Keep optional text readable: If you include a title or description, keep it short and non-critical — users may not have time to read it before the loader dismisses.
- Don’t trap focus: The Page loader should not move keyboard focus unless the operation is cancelable and requires an explicit action.