Spinner
Looping loading indicator. Use inside buttons, empty states, or inline next to text.
Default
Default size and colour.
Usage
Import the parts you need from the component's folder.
ts
import { Spinner } from "@/components/ui/spinner";With text
Inline next to status text.
Sizes
Scale the spinner with a size-* utility class.
Custom colour
Tint the spinner with a text-* colour utility.
In a badge
A small spinner reads as an in-progress badge status.
In an input group
Use the spinner as an addon to signal a loading field.
In an empty state
Drop the spinner into an Empty media slot as a loading placeholder.