Astryx Design System

Spinner@astryxdesign/core v0.0.15 · Spinner

Usage

An animated loading indicator for processes with unknown duration, such as data fetching or form submission. Supports visible labels, multiple sizes, and a dark background variant. For content with known dimensions, use Skeleton instead.

ts
import {Spinner} from '@astryxdesign/core/Spinner'

Best practices

Guidance	Practices
Do	Provide a meaningful label to describe what is loading for screen reader users.
Do	Use the "onMedia" shade when placed on dark or accent-colored backgrounds.
Don't	Use for content areas with known dimensions; use Skeleton to preserve layout instead.
Don't	Stack multiple spinners in the same view; use one to represent the overall loading state.

Examples

Common configurations, variations, and states.

Spinner — On Media Shade

Default and onMedia shade spinners for light and dark backgrounds.

Spinner — Sizes

All spinner sizes displayed side by side.

Spinner — With Label

Spinners with text and rich multi-line labels.