Spinner

Un elemento en rotación continua indicando estado de carga.

default.tsx

1import { Spinner } from '@repo/ui/components/spinner';
2
3export default function SpinnerDefault() {
4  return (
5    <div className="flex items-center justify-center py-8">
6      <Spinner />
7    </div>
8  );
9}

Instalación

pnpm dlx nachui add spinner

Anatomía

1import { Spinner } from '@/components/ui/spinner';

1<Spinner />

Ejemplos

Por defecto

default.tsx

1import { Spinner } from '@repo/ui/components/spinner';
2
3export default function SpinnerDefault() {
4  return (
5    <div className="flex items-center justify-center py-8">
6      <Spinner />
7    </div>
8  );
9}

Tamaños

Puedes cambiar el tamaño del spinner usando la propiedad size.

sizes.tsx

1import { Spinner } from '@repo/ui/components/spinner';
2
3export default function SpinnerSizes() {
4  return (
5    <div className="flex items-end justify-center gap-6 py-8">
6      <Spinner size="sm" />
7      <Spinner size="md" />
8      <Spinner size="lg" />
9      <Spinner size="xl" />
10    </div>
11  );
12}

Variantes

Puedes cambiar el color del spinner usando la propiedad variant.

variants.tsx

1import { Spinner } from '@repo/ui/components/spinner';
2
3export default function SpinnerVariants() {
4  return (
5    <div className="flex flex-wrap justify-center gap-4 py-8">
6      <Spinner variant="default" />
7      <Spinner variant="primary" />
8      <Spinner variant="muted" />
9      <Spinner variant="success" />
10      <Spinner variant="destructive" />
11      <Spinner variant="warning" />
12      <Spinner variant="info" />
13    </div>
14  );
15}

Referencia de API

Spinner

Prop	Tipo	Por defecto	Descripción
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	El tamaño del spinner
`variant`	`'default' \| 'primary' \| 'muted' \| 'success' \| 'destructive' \| 'warning' \| 'info'`	`'default'`	Estilo visual
`className`	`string`	-	Clases CSS adicionales

AnteriorSkeleton SiguienteSwitch