Components
Spinner
An animated loading indicator with 5 built-in variants
An animated loading indicator with 5 built-in animation styles selectable via
the variant prop.
Spinner
Run demo
bunx @gridland/demo spinnercurl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s spinnerInstallation
bunx shadcn@latest add @gridland/spinnerUsage
import { Spinner } from "@/components/ui/spinner"<Spinner text="Loading..." />Spinner
Examples
Variants
Use the variant prop to change the animation style.
dots · pulse · meter · bloom · ellipsis
<Spinner variant="bloom" text="Fetching data..." />
<Spinner variant="pulse" text="Building" />
<Spinner variant="ellipsis" text="Please wait" />Spinner
Custom Color
Use the color prop to override the default theme color.
<Spinner variant="pulse" text="Building" color="#05FFA1" />
<Spinner variant="dots" text="Compiling" color="cyan" />Spinner
Completion States
Use the status prop to replace the spinner with a completion symbol. The animation
stops and a semantic icon is shown with the appropriate theme color.
<Spinner status="success" text="Dependencies installed" />
<Spinner status="error" text="Build failed" />
<Spinner status="warning" text="Compiled with warnings" />
<Spinner status="info" text="3 tasks queued" />| Status | Symbol | Color |
|---|---|---|
success | ✔ | theme.success |
error | ✖ | theme.error |
warning | ⚠ | theme.warning |
info | ℹ | theme.accent |
API Reference
Spinner
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "dots" | "pulse" | "meter" | "bloom" | "ellipsis" | "dots" | Animation style |
text | string | - | Text displayed next to the spinner |
color | string | theme.accent | Foreground color of the spinner frame |
status | "spinning" | "success" | "error" | "warning" | "info" | "spinning" | Completion state — replaces the spinner with a status symbol |
SpinnerPicker
Interactive variant picker with keyboard navigation. Cycles through variants with ←→ keys.
| Prop | Type | Default | Description |
|---|---|---|---|
useKeyboard | (handler: (event: any) => void) => void | - | Keyboard hook from @opentui/react |
SpinnerShowcase
Renders all 5 variants side by side with sample text. Takes no props.