FeedbackDisponible

Spinner

Indicador de carga indeterminada acompañado de texto.

Loading components…Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/spinner.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

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

export default function Demo() {
  return (
    <output className="flex items-center gap-3">
      <Spinner aria-hidden="true" />
      <span className="bl-type-label">Loading components…</span>
    </output>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Distingue carga, progreso, éxito, error y ausencia de datos según el componente. Mantén el mensaje comprensible sin color.
El indicador no necesita hover. Solo sus acciones o controles de cierre reciben foco. Respeta la preferencia de movimiento reducido.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
className	string	?	Extends the root visual styles without changing its semantics.
children	ReactNode	?	Compose the exported subcomponents as shown in the runnable example.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.