components / feedback
Spinner
Indicate loading with a CSS-animated SVG, no JavaScript.
398 B gzip runs on the server · 0 JS
saving…
spinner-default.tsx
import { Spinner } from "@/components/ui/spinner";
export default function SpinnerDefault() {
return (
<div className="flex items-center gap-6 text-muted-foreground">
<Spinner />
<Spinner className="size-6" />
<span className="flex items-center gap-2 text-sm">
<Spinner className="text-brand-foreground" label="Saving" /> saving…
</span>
</div>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/spinner.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { Spinner } from "@/components/ui/spinner"
<Spinner />API
Spinner
SVG spinning via CSS. Inherits the text color. Server component.
| prop | type | default |
|---|---|---|
labelAnnounced text ( | string | "Loading" |
classNameExtra classes, merged with | string | - |