Spinner Component — Astro

Accessible loading spinner with variants and sizes

Spinner Component

An accessible loading spinner for indicating progress when content is loading. Uses role="status" and an aria-label (default: "Loading") so screen readers announce the state. Supports multiple sizes and color variants.

Props

  • size (string, optional) - sm, md, lg (default: md)
  • variant (string, optional) - primary, success, warning, error, info (default: primary)
  • label (string, optional) - Accessible label for screen readers (default: "Loading")
  • class (string, optional) - Additional CSS classes

Basic Usage

Live Example
astro astro 
---
import Spinner from '../../components/Spinner.astro';
---

<Spinner />

Sizes

Live Example
astro astro 
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Variants

Live Example
astro astro 
<Spinner variant="primary" />
<Spinner variant="success" />
<Spinner variant="warning" />
<Spinner variant="error" />
<Spinner variant="info" />

Custom Label

Use the label prop to describe the loading context for screen readers (e.g. "Loading results", "Saving…").

Live Example
astro astro 
<Spinner label="Loading results…" />

Features

  • Accessible - role="status" and aria-label so screen readers announce loading
  • Variants - Primary, success, warning, error, info using theme variables
  • Sizes - sm, md, lg
  • Reduced motion - Animation disabled when user prefers reduced motion; static segment shown instead

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above.