Feedback

Spinner and Skeleton

Waiting states: a spinner for short waits, skeletons for content that is on its way.

Ant Design: Spin, Skeleton

import { Spinner, Skeleton } from '@alea/ui';

Examples

For short waits.

The shape of what is coming. Mark the region aria-busy.

An indeterminate loading ring in the accent gradient.

Prop	Type	Default	Description
`aria-label`	`string`	-	What is loading, for screen readers. Default "Loading".
`className`	`string`	-	Extra class names.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	sm 16, md 24 (default), lg 40 px.

Show 10 React Aria props

A placeholder with a soft shimmer while content loads. Hidden from screen readers; mark the region aria-busy.

Prop	Type	Default	Description
`height`	`string \| number`	-	Height, as px or any CSS length.
`lines`	`number`	`1`	Number of text lines (the last one shorter).
`shape`	`"circle" \| "rect" \| "text"`	`'text'`	text: lines of text; rect: a block; circle: an avatar.
`width`	`string \| number`	-	Width, as px or any CSS length.

Skeletons are hidden from screen readers; set aria-busy on the region that is loading.

Don't