Build · New

Spinner

Tells people something is happening when you can't say how long it will take. Loading indicator adds a title and a short description.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/spinner

Usage

import { LoadingIndicator, Spinner } from "@/components/ui/spinner";

<LoadingIndicator title="Checking your balance" description="This usually takes a few seconds." />
<Spinner size={24} color="brand" label="Loading" />

Examples

Colors, sizes and dots

color brand, dark or light for the surface, and current follows the text color (in buttons). LoadingDots are three bouncing dots. Add a label to announce it.

API reference

LoadingIndicator

Prop	Type	Default	Description
`title`	`ReactNode`	`“Loading…”`	Figma's Title: what is loading.
`description`	`ReactNode`		Figma's Description.
`spinner`	`ReactNode`		Figma's Spinner slot: any spinner or `LoadingDots`.

Spinner

Prop	Type	Default	Description
`size`	`16 \| 20 \| 24 \| 32 \| 40 \| 48`		Or size it with `className`.
`color`	`"current" \| "brand" \| "dark" \| "light"`	`"current"`	Figma's Color, and `current` for the text color.
`label`	`ReactNode`		Makes it a `role="status"` announcing the text; without it, decorative.

LoadingDots

Prop	Type	Default	Description
`label`	`ReactNode`		As on Spinner.

Accessibility

ARIA

Loading indicator is role="status", so its title and description are announced.
The animation stops when reduced motion is on.
Don't show it for waits under a second, or more than one per screen.

Arabic and RTL notes

Mirrors

The dots bounce in reading order.

Does not mirror

The spinner turns clockwise in both directions.

Numerals: No numbers.
Arabic typography: The title is label-14 Medium, the description label-12; centered.

All components ›