componentes / feedback
Spinner
Indique carregamento com um SVG animado por CSS, sem JavaScript.
398 B gzip roda no servidor · 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>
);
}Instalação
$ npx shadcn@latest add https://cd-ui.vercel.app/r/spinner.jsonprimeira vez? configure o components.json e o tema antes: veja instalação.
Uso
import { Spinner } from "@/components/ui/spinner"
<Spinner />API
Spinner
SVG girando via CSS. Herda a cor do texto. Componente de servidor.
| prop | tipo | padrão |
|---|---|---|
labelTexto anunciado ( | string | "Loading" |
classNameClasses extras, mescladas com | string | - |