Spinner

The standalone loading indicator. Drop <Spinner /> anywhere — beside text, inside a button, as an EmptyState graphic — and it does the right thing with a few hundred bytes of CSS-driven motion. No JS render loops. No Motion library. No useEffect.

Anatomy

●        ← <Spinner variant="ring" />   (default, SVG arc rotating)
  ● ● ●     ← <Spinner variant="dots" />   (three staggered scaling dots)
   ◉        ← <Spinner variant="pulse" />  (sonar disc, scale + fade)

●        ← <Spinner variant="ring" />   (default, SVG arc rotating)
  ● ● ●     ← <Spinner variant="dots" />   (three staggered scaling dots)
   ◉        ← <Spinner variant="pulse" />  (sonar disc, scale + fade)

Variants

All three are pure CSS. The ring uses Tailwind's built-in animate-spin; the other two use two custom keyframes registered in the DS Tailwind preset (spinner-bounce + spinner-pulse), so any consumer of the preset gets the animations for free without an extra globals.css import.

Sizes

Speeds

Routed via inline animation-duration, so the keyframe utility class stays stable across every speed.

Examples

Props

Accessibility

• Wrapper announces. <Spinner /> carries role="status" + aria-busy="true" + aria-live="polite". Screen readers announce the loading state without taking focus.
• Label semantics adapt to placement. When labelPlacement="hidden" the label is applied as aria-label on the wrapper and no inner span is rendered — avoids double-announcement. When labelPlacement="end" | "bottom" the visible label text becomes the announcement (no wrapper aria-label).
• The animated glyph is aria-hidden. SVG, dot row, pulse disc — all hidden from AT. Only the wrapper (or its visible label child) is in the accessibility tree.
• prefers-reduced-motion. All three variants halt under reduced motion via the Tailwind motion-reduce: variant. The label still announces. The glyph stays visible as a static representation.
• axe-core. Zero violations across the variant × color × labelPlacement matrix.
• currentColor fallback. Drop <Spinner /> (no color prop) inside a <Button color="primary"> or an <a> and it inherits the surrounding text color automatically. The single most common pattern needs no role override.

Theming

defineTheme({
  components: {
    Spinner: {
      defaultProps: { variant: 'dots', speed: 'slow' },
      styleOverrides: {
        root: 'gap-3', // wider visible gap when a label is rendered
        label: 'font-medium',
      },
    },
  },
});

defineTheme({
  components: {
    Spinner: {
      defaultProps: { variant: 'dots', speed: 'slow' },
      styleOverrides: {
        root: 'gap-3', // wider visible gap when a label is rendered
        label: 'font-medium',
      },
    },
  },
});