Spinner

A spinner indicates that a part of the product is currently performing a task, and the duration of this process is unknown.

usage

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

sources

Github

Guidelines

When to use

• To notify users that an action is in progress.

Accessibility

• The spinner component has a role of status by default. When inside a parent component that is focusable, the spinner should have a role of presentation to prevent the screen reader from reading the spinner.
• The parent component should have a aria-busy attribute set to true when the spinner is visible.
• The parent component should have a aria-live attribute set to polite.

Spinner vs Loader

• Use the spinner component insider another component. When the whole page is waiting for data, use a loader instead.

Usage

Default

A simple spinner.

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

Size

A spinner can vary in size.

<Inline alignY="end">
    <Spinner size="sm" aria-label="Loading..." />
    <Spinner aria-label="Loading..." />
    <Spinner size="lg" aria-label="Loading..." />
</Inline>

Label

A spinner can have a label.

<Inline alignY="end">
    <Spinner size="sm">Loading...</Spinner>
    <Spinner>Loading...</Spinner>
    <Spinner size="lg">Loading...</Spinner>
</Inline>

Over background

You can change a spinner style when over a background by setting a color property on the spinner.

<Div backgroundColor="alias-accent" padding={4}>
    <Spinner color="alias-static-white">Loading...</Spinner>
</Div>

API

Spinner

usage

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

extends

• Div
• StyleProps