Spinner
An indeterminate loading indicator for short waits.
npx prodular-ui add spinnerSizes
import { Spinner } from "@/components/ui/spinner"
export default function SpinnerDefault() { return ( <div className="flex items-center gap-4 text-muted-foreground"> <Spinner className="size-3" /> <Spinner /> <Spinner className="size-6" /> </div> )}Guidance
Use it when
- Waits under a few seconds where the layout of the result is unknown.
Avoid
- Loading whole pages. Use Skeleton so the layout does not jump.
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add spinner# or, with the registry in components.jsonnpx shadcn@latest add @prodular/spinner