Spinner
Lightweight loading states with a rotating ring or bouncing dots. Framer Motion and your theme tokens.
Live preview
Every stall deserves a kinder signal —one tireless lap,orthree staggered taps— calm motion that still reads.
Install
v0
Ship the registry bundle to v0 and iterate on motion or layout with prompts.
Usage
Default export — pass variant and className for sizing. See tile 05 for API detail.
import Spinner from "@/components/ui/spinner";
export function SavingIndicator() {
return <Spinner className="size-4" />;
}
export function InlineDots() {
return <Spinner variant="dots" className="size-5" />;
}Dependencies
Registry peers and how this component fits your app.
variant (optional)
Defaults to "ring" (rotating border). Use "dots" for three bouncing dots. Both respect the same className sizing.
className (optional)
Merged onto the root element. Pass Tailwind size utilities such as size-2 through size-8 to scale the spinner; the default base is size-6.
framer-motion
Drives the ring rotation and the vertical bounce on each dot with repeating transitions.
Accessibility
Root renders role="status" with aria-label="Loading". Extend the component to accept and spread extra attributes if you need a custom accessible name, or pair with visually hidden text nearby.
shadcn registry
Peer dependency framer-motion is declared on the registry item so shadcn add can install it when needed.