Prototype Library

Loading Spinner

Rotating ring indicator. Three sizes plus an optional custom color.

Inherited .astro import EsaLoadingSpinner from '@esa/ecology/esa-loading-spinner.astro';

Preview

<LoadingSpinner />

Sizes

<LoadingSpinner size="xs" />
<LoadingSpinner size="sm" />
<LoadingSpinner size="md" />
<LoadingSpinner size="lg" />

Custom color

Pass any CSS color (including a token reference) to recolor the rotating arc.

<LoadingSpinner color="var(--color-background-utility-success, #22c55e)" />
<LoadingSpinner color="var(--color-background-utility-warning, #f59e0b)" />
<LoadingSpinner color="var(--color-background-utility-danger, #ef4444)" />

API

PropTypeDefaultDescription
size 'xs' | 'sm' | 'md' | 'lg' 'md' Ring diameter (14 / 20 / 32 / 48px).
color string — Any CSS color value for the rotating arc. Defaults to --color-background-brand.
label string 'Loading' Accessible name. Say what is loading when you can — "Loading results".
decorative boolean false Hide from assistive technology entirely. For a spinner inside something that already says it is busy — an `esa-button` with `loading` (which sets `aria-busy` and keeps its own label), or an `esa-loading-overlay` that carries the message. Two names for one state is noise, not redundancy.

Accessibility

  • The ring carries role="status" and aria-label="Loading".
  • Decorative-only when paired with adjacent loading text — keep one accessible name, not two.