Indicador de carga

import {
  Item,
  ItemContent,

El spinner es un único icono animado que señala una operación en curso. Envuelve el LoaderIcon de lucide-react con animate-spin y trae de fábrica role="status" y un aria-label; no hay ninguna biblioteca de primitivas de por medio, así que ambos backends comparten la misma implementación, y hereda currentColor para integrarse con cualquier control neobrutalista en el que se coloque.

Recurre a este componente cuando:

• Envíos pendientes — ponlo dentro de un botón mientras corre la mutación; la etiqueta no se mueve.
• Estados de carga en línea — insignias, grupos de campos y celdas de tabla a la espera de datos.
• Cargas a nivel de sección — combínalo con Empty mientras el contenido de un panel va llegando.

Instalación#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/spinner.json
npx shadcn@latest add https://neobrutalism.com/r/base/spinner.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/spinner.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/spinner.json
Copiar

import { Loader2Icon } from "lucide-react"

import { cn } from "@/lib/utils"

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <Loader2Icon
      data-slot="spinner"
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}

export { Spinner }

Uso#

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

Copiar<Spinner />

Personalización#

Puedes reemplazar el icono predeterminado del spinner por cualquier otro icono modificando el componente Spinner.

import { LoaderIcon } from "lucide-react"

import { cn } from "@/lib/utils"

Copiarimport { LoaderIcon } from "lucide-react"
 
import { cn } from "@/lib/utils"
 
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <LoaderIcon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}
 
export { Spinner }

Ejemplos#

Tamaño#

Usa la clase utilitaria size-* para cambiar el tamaño del spinner.

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

export function SpinnerSize() {

Button#

Añade un spinner a un botón para indicar un estado de carga. Coloca <Spinner /> antes de la etiqueta con data-icon="inline-start" para una posición inicial, o después de la etiqueta con data-icon="inline-end" para una posición final.

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

Badge#

Añade un spinner a un badge para indicar un estado de carga. Coloca <Spinner /> antes de la etiqueta con data-icon="inline-start" para una posición inicial, o después de la etiqueta con data-icon="inline-end" para una posición final.

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

Input Group#

import { ArrowUpIcon } from "lucide-react"

import {

Empty#

import { Button } from "@/components/ui/button"
import {
  Empty,

RTL#

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración RTL.

"use client"

import * as React from "react"

Accesibilidad#

El spinner renderiza role="status" con aria-label="Loading", así que los lectores de pantalla anuncian el estado de carga sin cableado adicional. Cuando un texto cercano ya describe el estado («Guardando…»), pasa mejor aria-hidden="true" al spinner: con un solo anuncio basta. Para toda una región que entra en estado de carga, define aria-busy="true" en el contenedor.