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-success, #22c55e)" />
<LoadingSpinner color="var(--color-warning, #f59e0b)" />
<LoadingSpinner color="var(--color-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-primary.

Accessibility

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