Components

Spinner

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

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Spinner has role="status" and reads a visually hidden “Loading”.

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

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Spinner />
    </Provider>
  );
}

Sizes

xs 12, sm 16, md 20 and lg 24 px; it uses the icon size tokens.

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

export default function Sizes() {
  return (
    <div className="flex items-center gap-lg">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </div>
  );
}

Tones

current takes the surrounding text colour, subtle the secondary text, brand the primary action colour; primary is its former name and draws the same colour.

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

export default function Tones() {
  return (
    <div className="flex items-center gap-lg text-fg-default">
      <Spinner size="md" tone="current" />
      <Spinner size="md" tone="subtle" />
      <Spinner size="md" tone="brand" />
    </div>
  );
}

With visible text

When visible text tells the state, make the Spinner decorative and give the status role to the text’s container.

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>
  );
}

Light and dark mode

The arc comes from colour tokens; it keeps the same contrast in both modes.

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

export default function Tones() {
  return (
    <div className="flex items-center gap-lg text-fg-default">
      <Spinner size="md" tone="current" />
      <Spinner size="md" tone="subtle" />
      <Spinner size="md" tone="brand" />
    </div>
  );
}