Spinners

Spinner is an animated, indeterminate loading indicator. Reach for it when something is in flight but you cannot say how far along it is: a request resolving, a page hydrating, an action being submitted. It renders an accessible spinning icon with role="status" and a built-in “Loading” label. When you do know the completion ratio, use a determinate Progress bar instead.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: spinner.tsx

import { Spinner } from "@beacon/design-system";

// Default size (1rem square).
<Spinner />

// Resize with utility classes.
<Spinner className="size-8" />

// Pair with a label for context.
<div className="flex items-center gap-2">
  <Spinner />
  <span className="text-sm text-muted-foreground">Loading...</span>
</div>

Props

Spinner is a single SVG element and accepts all standard svg props.

Prop	Type	Default	Description
className	string	"size-4 animate-spin"	Extra classes merged onto the icon; override size-* to resize.

The component sets role="status" and aria-label="Loading" automatically for screen readers.

When to use

• Inline loading state inside a button while an action submits.
• Open-ended waits where the duration or completion percentage is unknown.
• Lightweight placeholder while a small region fetches data.

Do not use Spinner when you can show measurable progress. For a known completion ratio use the Progress bar instead.