Feedback

Spinner

Spinner is an indeterminate loading indicator for operations without a meaningful completion percentage.

Size (Small/Medium/Large) — 3 variants

betaReact AvailableFigma AvailableDocs Partial

Known open questions

Loading results…

Indicating an indeterminate, in-progress loading state with no known completion percentage.

Spinner = rotating arc indicator with optional visible or screen-reader-only label.

decorative · labeled

Any load time where percentage-complete truly isn't knowable.

When percentage IS knowable — use Progress Bar.

role="status" and an aria-label like "Loading" — the spinning animation itself conveys nothing to non-visual users.

Not interactive.

Providing a purely decorative spinner with no accessible label.

Size as variants. Built using a real partial-arc ellipse (Figma's arcData), not a fake icon.

Hide the spinner when visible loading text already communicates status. Provide a label when the spinner is the only loading indicator.

semantic/border/defaultsemantic/action/primary

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Spinner dimensions.
label	string	—	Accessible name for standalone usage.
decorative	boolean	false	Hides spinner from assistive technology.

Copy React example

import { Spinner } from "@/components/ui/Spinner";

export function Example() {
  return <Spinner label="Loading results" />;
}