Feedback

Spinner

An indeterminate loading indicator in three sizes that inherits its color from the text color.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

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

Loading of unknown duration: fetching data, submitting a form, waiting on a server.
Inside a disabled Button while its action runs.
The indeterminate state of Progress and CircularProgress, which have no built-in indeterminate mode.

When you know the percentage, show Progress or CircularProgress instead.
For loading a page layout, a skeleton (animate-pulse blocks in the shape of the content) feels faster than a lone spinner.

sm (16px), md (24px) and lg (32px).

Disable the button and show a small spinner while the action runs. Click to try it.

Use a muted color and a specific label while a section loads.

Extends native svg attributes (className, aria-label, aria-hidden).

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	16px, 24px or 32px.
className	string	-	Color comes from currentColor and defaults to text-primary. Use text-primary-foreground inside a primary Button.
aria-label	string	"Loading"	Accessible name. Make it specific, such as "Loading invoices".

Renders an svg with role="status" and aria-label="Loading"; override the label with something more specific when you can.
The spin uses Tailwind's animate-spin. Consider motion-safe:animate-spin or a static fallback for people who prefer reduced motion.
In a button that already shows loading text, add aria-hidden="true" to the Spinner so it is not announced twice.
Disable the button while it shows a spinner so the action cannot be triggered again.