Loader

A loader provides reassurance that content is currently being loaded, processing, or that change will occur on the page.

usage

import { Loader } from "@sharegate/orbit-ui";

sources

Github

Guidelines

When to use

• To give feedback for an entire page load.
• On page elements where the visual layout/format of the content being loaded is unknown.
• To indicate processing, or that change will occur on the page (rather than loading UI elements).

Accessibility

• The loader has a role of status by default.
• The parent component should have a aria-busy attribute set to true when the loader is visible.
• The parent component should have a aria-live attribute set to polite.

Loader vs Spinner

• When you need to give feedback for a user or system action, use a spinner instead.

Usage

• Avoid increasing the size of the Loader to maintain consistency with other indicators accross the application.
• Always center the Loader and position it close to where you want the user's attention to be once loading is complete.
• Ideally used on a body or surface background.
• The delay property should often be used to avoid flashing the loader when the loading time is very short.

Default

This is the default loader.

<Loader aria-label="Loading..." />

Delay

A loader can appears after a short delay. This is to prevent the loader from appearing when the action is very fast. By settings delay to true, the loader will appear after 300ms. You can also set a custom delay in milliseconds.

<Stack>
    <Loader delay aria-label="Loading..." />
    <Loader delay={800} aria-label="Loading..." />
</Stack>

API

Loader

usage

import { Loader } from "@sharegate/orbit-ui";

extends

• Div
• StyleProps