5.0.0 • Published 3h ago

@propellerads/spinner

Licence

MIT

Version

5.0.0

Deps

Size

13 kB

Vulns

Weekly

Summary Dependency Versions

Spinner

NPM | Github

A loading ring, the way shadcn's spinner is: role="status" with a label for a screen reader, colours from @propellerads/tokens, slower under prefers-reduced-motion.

Installation

bun add @propellerads/spinner

The styles come with the package. Colours come from @propellerads/tokens: load its CSS once in the app.

Usage

import Spinner, {SpinnerColor, SpinnerSize} from '@propellerads/spinner';

<Spinner delay={300} center size={SpinnerSize.Md} color={SpinnerColor.Blue} />;

Prop	Type	Default
`delay`	`number`	`0`	Ms before it shows
`center`	`boolean`	`false`	Fills the container and stands in its middle
`size`	`'sm' \| 'md'`	`'md'`	16px or 24px
`color`	`'black' \| 'white' \| 'blue' \| 'gray' \| 'gray_dark' \| 'red' \| 'current'`	`'black'`	See below
`label`	`string`	`'Loading'`	What a screen reader announces
`className`	`string`

The ref reaches the outer <span>.

Colours

`color`	Token
`black`	`--color-dark-inversion`
`white`	`--color-light`
`blue`	`--color-action`
`gray`	`--color-quiet`
`gray_dark`	`--color-quiet-text`
`red`	`--color-danger`
`current`	the text colour around it

Any other colour: set --spinner-color on the spinner or an ancestor.

Old names

SPINNER_SIZE and SPINNER_COLOR from v2 and v3 are still exported, so moving from any version is a version bump.