Spinner

Indeterminate loading indicator for buttons, panels, and overlays — three variants, five sizes, three speeds.

stable
since v0.1.0
0.7 kB
data-display
loading
feedback

Preview

tsx

import { Spinner } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <Spinner />;
}

Variants

Three visual variants are available — border (default), dots, and ring.

Preview

Open

tsx

import { Spinner } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}>
      <Spinner variant="border" size="lg" colorScheme="accent" />
      <Spinner variant="dots" size="lg" colorScheme="accent" />
      <Spinner variant="ring" size="lg" colorScheme="accent" />
    </div>
  );
}

Sizes

Five sizes are available: xs, sm, md (default), lg, and xl.

Preview

Open

tsx

import { Spinner } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '1.25rem', alignItems: 'center' }}>
      <Spinner size="xs" colorScheme="accent" />
      <Spinner size="sm" colorScheme="accent" />
      <Spinner size="md" colorScheme="accent" />
      <Spinner size="lg" colorScheme="accent" />
      <Spinner size="xl" colorScheme="accent" />
    </div>
  );
}

Color schemes

Three color schemes are available — accent, neutral, and currentColor (the default; inherits the surrounding text colour, useful inside buttons).

Preview

Open

tsx

import { Spinner } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}>
      <Spinner size="lg" colorScheme="accent" />
      <Spinner size="lg" colorScheme="neutral" />
      <span style={{ color: 'var(--cynosure-color-success-solid)' }}>
        <Spinner size="lg" colorScheme="currentColor" />
      </span>
    </div>
  );
}

Speed

The speed prop controls the animation tempo: slow, normal (default), or fast.

Preview

Open

tsx

import { Spinner } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}>
      <Spinner size="lg" speed="slow" colorScheme="accent" />
      <Spinner size="lg" speed="normal" colorScheme="accent" />
      <Spinner size="lg" speed="fast" colorScheme="accent" />
    </div>
  );
}

API

PropTypeDefaultDescription

size

"xs"|"sm"|"md"|"lg"|"xl"

Diameter token (xs–xl).

colorScheme

"accent"|"neutral"|"currentColor"

currentColor

Colour role: `accent` for brand emphasis, `neutral` for muted, or `currentColor` to inherit from the parent text colour.

variant

"border"|"dots"|"ring"

border

Visual style. `border` is the spinning ring; `dots` is the pulsing three-dot cluster; `ring` is a tighter solid arc.

speed

"slow"|"normal"|"fast"

normal

Rotation/cycle speed token.

label

string

Accessible label announced via `aria-label` on the `role="status"` host.

Accessibility

Renders role="status" with aria-live="polite" so screen readers announce activity as it becomes available.
The label prop (default "Loading") is forwarded as aria-label; pass a more specific string inside contextual loaders.
Honours prefers-reduced-motion — the animation slows or stops when the user requests it.
The visible icon / dots are aria-hidden — only the wrapper carries semantics.
Pair with aria-busy="true" on the surrounding region (e.g. a button or a card) for richer status semantics.

Recipes

Use size="sm" inside buttons and size="lg" for full-panel loaders.
Match colorScheme to the surrounding semantic action — accent for primary actions, currentColor to inherit the parent’s foreground.
Use variant="dots" for chat-style typing indicators; variant="ring" for a softer treatment than the default border.
Pass a contextual label (e.g. "Saving changes") so screen readers announce what is in flight.