NovoFeedbackdesde v0.2.0

Spinner

Indicador de carregamento.

Quando usar

Carregamento inline em botões e blocos pequenos.

Playground

Ajuste props ou edite o código em tempo real (componentes compatíveis).

Controles interativos disponíveis em breve para este componente. Use os exemplos abaixo como referência.

import { Spinner } from "./spinner"

export default function App() {
  return <Spinner style={{ width: 24, height: 24 }} />
}

Exemplos

Variações comuns de uso.

Uso básico

import { Spinner } from "@/components/ui/spinner"

export function SpinnerDemo() {
  return <Spinner />
}

API

Props principais documentadas para o time.

PropTipoPadrãoDescrição
classNamestringClasses Tailwind para layout e espaçamento.
childrenReactNodeConteúdo interno do componente.

Instalação

pnpm dlx shadcn@latest add http://localhost:3000/r/spinner.json
pnpm dlx shadcn@latest add @youxgroup/spinner

Dependências

npm: cn, @hugeicons/react, @hugeicons/core-free-icons

Relacionados