Components

Spinner

An open arc that turns while something loads and reports the state to screen readers.

Storybook: Storybook
Source: Source

When to use

Spinner is for a short wait of unknown length that lasts more than about a second: a panel loading, a change being saved.

When not to use

When the shape of the content is known: Use a Skeleton.
When progress can be measured: Use a progress bar.
For a button’s action: Use Button loading.
For saving a switch: Use Switch loading.

Anatomy

Saving

import { Spinner } from '@bigbang/ui';

export default function WithText() {
  return (
    <div role="status" className="flex items-center gap-sm type-body-md text-fg-subtle">
      <Spinner decorative />
      <span>Saving</span>
    </div>
  );
}

Arc: an open arc of about 300° with round caps and no track, turning.
Label: visually hidden or visible state text.

Behaviour

The arc turns every period-spinner (1000 ms).
Under reduced motion the turn stops; the state is told in text.
role="status" may not be announced on insertion; to announce the state for sure, use a status region that exists beforehand.

Guidelines

Show one loading indicator at a time.
Add no indicator for waits shorter than a second.
When loading can take over ten seconds, say in visible text what is loading.

Content

label says what is loading: “Loading results”.
The default text is the library string.

Turkish	English
Yükleniyor	Loading
Kaydediliyor	Saving

Button: a loading state inside a button.
Switch: a saving state inside a switch.