⟳

Spinner

Feedback

An animated loading indicator communicating that a process is in progress.

Preview

Code

VUE

<Spinner>
  Loading…
</Spinner>

Props

Size

Size of the spinner

Variant

Color variant

Label

Accessible label for screen readers

Show Label

Renders the label visibly below the spinner

Props API

Prop	Type	Default	Required	Description
`size`	`select`"xs" \| "sm" \| "md" \| "lg" \| "xl"	`"md"`	—	Size of the spinner
`variant`	`select`"primary" \| "muted" \| "white"	`"primary"`	—	Color variant
`label`	`string`	`"Loading…"`	—	Accessible label for screen readers
`showLabel`	`boolean`	`false`	—	Renders the label visibly below the spinner

Usage

Use spinners for indeterminate loading states where progress cannot be measured. For known durations, a progress bar communicates more. Always provide a meaningful label describing what is loading.

Accessibility

Has role="status" and aria-label so screen readers announce the loading state.
The visually hidden label is always present for assistive technologies.