LoadingDots

When to useLink to "When to use"

• Inside a button while it saves (Button does this for you with loading).
• Inline status text, list footers, a panel that is still loading.

UsageLink to "Usage"

import { LoadingDots } from "@arshad-shah/cynosure";

<LoadingDots label="Saving document" />        // announced
<LoadingDots size="lg" tone="accent" />        // decorative
<LoadingDots color="#14b8a6" speed="slow" />   // one-off colour

Announcing itLink to "Announcing it"

By default the dots are decorative. Set label to give them role="status" and an accessible name. Leave it out when the surrounding control already reports the state, as Button does with aria-busy.

Size, tone and speedLink to "Size, tone and speed"

size defaults to inherit, which follows the surrounding font size; sm, md and lg are fixed. tone is any tone, muted, or inherit (the current text colour). speed is slow, normal or fast. color takes any CSS colour for one-off cases; prefer tones.

SpinnerLink to "Spinner"

variant="spinner" draws the loader icon turning instead of the dots. It is one em square, so it sits where an icon would: a statement gutter, a tree row, a tool call's header, beside a button's text. It takes the same size, tone, color, speed and label.

<Button>
  <LoadingDots variant="spinner" /> Connecting
</Button>

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Reduced motion: with the OS setting or createTheme({ motion: "reduced" }), the dots stay still and fully visible, and the spinner stops turning.
• Without a label the dots or spinner are aria-hidden. The spinner's icon is always decorative; with a label the root is the status.

ThemingLink to "Theming"

Tokens: --cy-loading-dots-dot-size, --cy-loading-dots-gap, --cy-loading-dots-color, --cy-loading-dots-duration and --cy-loading-dots-size-{sm,md,lg}.

createTheme({ components: { loadingDots: { gap: "0.4em" } } });

RelatedLink to "Related"

Button