Spinner

Installation

npx asteria-ui add spinner

Usage

import { Spinner } from "@/components/ui/spinner";

{isLoading ? <Spinner /> : <Content />}

A static ring with one accent dot at a fixed corner, rotating as a whole via animate-spin. Distinct from Button's own internal loading spinner, which is a two-tone SVG arc sized to match Button's icon slots — two different components for two different jobs, not the same thing built twice.

Examples

Sizes

API reference

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Diameter — 16 / 24 / 32px.

Accessibility

Role. Renders as a native <output>, whose implicit role is status.
Accessible name. aria-label="Loading".
Busy state. aria-busy="true" on the container.
Unmounting. Spinner has no "done" state of its own — swap it out for real content (or an empty state) once loading finishes.