FeedbackAnimated
Spinner
Loaders, including the signature crop-mark spinner.
Spinners say "working on it". The signature marks spinner is four crop marks that close in, turn a quarter and open again. The ring and dots variants are quieter alternatives.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/spinner.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/spinner.
Builds on: motion
Usage
import { Spinner } from "@/components/ui/spinner";
<Spinner variant="marks" label="Saving" />Motion
How it moves
The marks variant is a looping GSAP timeline: corners converge, rotate 90° with a snap, and release.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Spinner
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "marks" | "ring" | "dots" | "marks" | Style. |
| size | "sm" | "md" | "lg" | "md" | Size. |
| label | string | "Loading" | Accessible status text. |
Accessibility
- role=status with an aria-label.
- With reduced motion the marks hold still; the ring slows down.
FAQ
Also searched as: react spinner · loading spinner · loader component · animated loader · shadcn spinner