Spinner

Indeterminate activity indicator drawn with the current text color. It spins only when the user has not asked for reduced motion; otherwise it stays a static ring and the label still says that work is in progress.

Import

import { Spinner } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/spinner.

Usage

<Spinner size="sm" />

Props

Prop	Type	Default	Description
size	number | SpinnerSize	"sm"	Named size, or a pixel size for one-offs. Defaults to sm.
label	string | false		Accessible name announced through role="status". Defaults to the localized loading UI string. false marks the spinner decorative (aria-hidden), for use next to its own text.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Sizes
• Custom Label
• Decorative
• Spanish

Source

packages/ui/src/atoms/spinner/spinner.tsx