Spinner

An indeterminate busy indicator. Rotation is the one exception the motion rule has to allow — a still spinner says nothing. It stops under prefers-reduced-motion.

src/components/ui/spinner.tsx

About

From the component's own source, where it was written.

An indeterminate busy indicator.

Rotation is the exception the motion rule has to allow — a still spinner says nothing at all. It stops under prefers-reduced-motion, where the label and role="status" still carry the meaning.

Install

npx astralyx-ui add spinner

Usage

import { Spinner } from '@/components/ui/spinner'

<Spinner size="sm" label="Loading results" />

Composer

Change the props and the source below follows.

Props

size

label

tsx

<Spinner size="default" label="Loading" />

Examples

Sizes

tsx

<Spinner size="sm" />

In a button

tsx

<Button disabled><Spinner size="xs" /> Saving</Button>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Spinner`

An indeterminate busy indicator.

Extends ComponentProps<'span'>.

Prop	Type	Default	Description
size	'sm' \| 'default' \| 'xs' \| 'lg' \| 'xl'	'default'	Diameter and border weight.
label	string	'Loading'	Screen-reader text. The element is role="status", so this is what gets announced.

Functions

Function	Signature	Description
spinnerVariants	(props?: { size?: 'sm' \| 'default' \| 'xs' \| 'lg' \| 'xl' }) => string	An indeterminate busy indicator.