Spinner

feedback

Animated loading spinner with SVG arc rotation, 3 sizes (sm/md/lg), optional label, and role=status for accessibility. Uses CSS keyframe animation with token-controlled speed.

Import

typescript
import { Spinner } from "packages/ui/src";

Props

SpinnerProps

PropTypeRequired
sizeSpinnerSizeNo
labelstringNo
classNamestringNo

Examples

Sizes

With Labels

Inline Usage

Fetching latest token data...

Metadata

Component Metadata
Familyfeedback
FrameworksNext.js, Astro/EmDash
DescriptionAnimated loading spinner with SVG arc rotation, 3 sizes (sm/md/lg), optional label, and role=status for accessibility. Uses CSS keyframe animation with token-controlled speed.
PropsSpinnerProps (size?: SpinnerSize, label?: string, className?: string)
Statessm, md, lg, with-label, without-label
A11y
  • role=status for live region
  • aria-label defaults to 'Loading'
  • Custom label overrides aria-label
  • SVG is aria-hidden
Responsive
  • Inline-flex for inline usage
  • Size controlled by tokens
Motion
  • Continuous rotation animation at token-controlled speed
Token Dependencies
  • components.spinner.color
  • components.spinner.trackColor
  • components.spinner.sizeSm
  • components.spinner.sizeMd
  • components.spinner.sizeLg
  • components.spinner.strokeWidth
  • components.spinner.speed
  • components.spinner.labelColor
  • components.spinner.labelFontSize
  • components.spinner.gap
Content Slotslabel (string)
CMS Bindings
  • Loading message from CMS
Test Cases
  • Renders spinner
  • Has aria-label Loading by default
  • Uses custom label as aria-label
  • Shows label text
  • Renders SVG
  • Applies size class
  • SVG is aria-hidden
  • Passes className through