GitHub

Loading Spinner

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

Stable .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.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

TokenTierResolves to
--loading-spinner-color component #46a758 via --color-primary → --color-grass-9
--loading-spinner-track-color component #d9d9d9 via --color-border-light → --color-gray-6
--radius-full primitive 9999px