Feedback · astro-ui · Spinner

Spinner

Loading indicator in 4 animation styles and 6 sizes.

Spinner communicates in-flight work with pure CSS animation — ring, dots, bars, and pulse styles at six sizes. Color follows the text color; wrap it in a button or surface and it inherits.

← All components

Features

  • 4 variants: ring (default), dots, bars, pulse
  • 6 sizes from xs to 2xl
  • Pure CSS animation — zero JS
  • Respects prefers-reduced-motion

Usage

---
import { Spinner } from "astro-ui";
---

<Spinner />
<Spinner variant="dots" size="lg" />

Demos

Styles

<Spinner label="Ring" />
<Spinner icon="dots" label="Dots" />
<Spinner icon="pulse" label="Pulse" />
<Spinner icon="spin" label="Spin" />

Sizes & colors

<Spinner size="xs" label="xs" />
<Spinner size="sm" label="sm" />
<Spinner size="lg" label="lg" />
<Spinner variant="success" label="Success" />
<Spinner variant="warning" label="Warning" />

API

Props

PropTypeDefaultDescription
icon"ring" | "dots" | "pulse" | "spin""ring"Visual style of the spinner.
variant"inherit" | "primary" | … | "accent""inherit"Glyph color.
size"xs" | "sm" | "md" | "lg" | "xl" | "2xl""md"Glyph size.
labelstring—Accessible status label.
classstring—Merged via cn(); Tailwind classes welcome.
idstring—Element id.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

  • role=status with a visually hidden Loading label by default
  • aria-label override for specific contexts (Saving, Uploading…)
  • Animation disabled under prefers-reduced-motion (static glyph)

FAQ

Ring vs Button loading?

Button has built-in loading that swaps its label for a spinner. Use standalone Spinner for page regions and inline waits.

Changelog

Version history mentioning Spinner.

v0.1.0 — 2026-11-11
added
  • Feedback (6): Alert, Spinner, Skeleton, Toast, Banner, NotificationCenter.