General

Spinner

An animated loading indicator for asynchronous operations. Renders as a spinning circle with a primary-colored arc.

Sizes

default

Import

import { Spinner } from "@mikenotthepope/substrateui"

Labels

A spinner has no text at all — this string is the whole of what a screen reader gets. Override one instance with the labels prop on the component, or every instance at once through LabelsProvider's spinner key — the provider is how you translate the set once instead of at each call site.

Prop	Type	Default	Description
`loading`	`string`	`"Loading…"`	Accessible name for the spinner.

Accessibility

Spinner renders with role="status" and an aria-label so screen readers announce the loading state rather than silently skipping over it.

For standalone loading pages, pair Spinner with visible text ("Loading…") for sighted users — the animation alone carries no meaning for users who have turned off the spinner via reduced motion.

API Reference

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Controls the diameter of the spinner.
`className`	`string`	—	Additional CSS classes to apply to the spinner element.