Spinner
A simple CSS-only animated loading indicator. Uses border-t-transparent to create the spinning arc effect. No dependencies.
- ✓4 sizes: sm, default, lg, xl
- ✓role="status" + aria-label for screen reader accessibility
- ✓Colour inherits from currentColor — adapts to any context
- ✓No external dependencies
Loading…
Loading…
Loading…
Loading…
import { Spinner }from "@aetherstack/ui"
spinner.tsx
import { Spinner } from "@aetherstack/ui"
<Spinner size="sm" />
<Spinner size="default" />
<Spinner size="lg" />
<Spinner size="xl" />Usage
Inside a button
Combine with Button to show loading state during async actions.
Custom color
Spinner inherits currentColor — use text utilities to change its color.
Loading…
Loading…
Loading…
Loading…
Centered page loader
Full-height centered spinner for page-level loading states.
Loading page content…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "xl" | "default" | Controls the width and height of the spinner. |
| label | string | "Loading…" | Screen-reader label set on aria-label and in the sr-only span. |
| className | string | — | Additional classes — use text-* to change colour. |
* Required props
Accessibility
- →role="status" announces loading updates without interrupting the user.
- →The visible spinner div is hidden to screen readers; the sr-only span provides the label.
- →Set label to a meaningful description, e.g. "Saving changes…" or "Loading results…".