Spinner

v0.4.4
Stable

A loading spinner with size variants and accessible labeling.

pnpm add @behivetech/atoms.spinner

You are viewing Spinner v0.4.4, snapshotted 2026-11-09. The latest is v0.4.5. Go to the latest →

A loading spinner with size variants and accessible labeling.

A pure CSS animated loading indicator. Uses role="status" and aria-label so screen readers announce the loading state without visual output.

Usage

1import { Spinner } from "@behivetech/atoms.spinner";
2

3<Spinner size="md" label="Loading..." />;

Examples

Small

1<Spinner size="sm" />

Medium (default)

1<Spinner size="md" />

Large

1<Spinner size="lg" />

Custom Label

1<Spinner size="md" label="Saving your changes..." />

Accessibility

  • role="status" announces loading state to screen readers
  • aria-label carries the human-readable label (defaults to "Loading...")
  • The visible circle is aria-hidden="true" to avoid redundant announcements

Examples

Open all 4 →
Small Spinner
1const SmallSpinner = () => {
2  return <Spinner size="sm" />;
3};
4

5render(<SmallSpinner />);
Medium Spinner
1const MediumSpinner = () => {
2  return <Spinner size="md" />;
3};
4

5render(<MediumSpinner />);

Properties

Spinner props

PropTypeDefaultDescription
classNamestring—Additional class names to merge with the component root element
labelstringLoading...Accessible label announced to screen readers while loading
size"sm" | "md" | "lg"mdControls the size; defaults to md

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).