Spinner

zyra-spinner

Loading indicators for async states, background fetches, and actions that need a clear pending signal.

Loading

API

All inputs and configuration options for zyra-spinner.

PropTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg''md'Diameter of the spinner
color'accent' | 'accent-2' | 'white' | 'current''accent'Spinner track color
labelstring'Loading…'Screen-reader-only label for accessibility

Accessibility

Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.

  • Renders with role="status" so screen readers announce the loading state
  • label is visually hidden but announced to screen readers
  • When embedding in a button, set button aria-busy="true" alongside the spinner