Spinner

import {
  Item,
  ItemContent,

Lo spinner è una singola icona animata che segnala un’operazione in corso. Avvolge la LoaderIcon di lucide-react con animate-spin e include di serie role="status" più un aria-label — nessuna libreria di primitive coinvolta, quindi i due backend condividono la stessa implementazione, ed eredita currentColor per intonarsi a qualunque controllo neobrutalista lo ospiti.

Quando usarlo:

• Invii in attesa — infilalo in un pulsante mentre la mutation è in corso; l’etichetta resta al suo posto.
• Stati di fetch inline — badge, gruppi di input e celle di tabella in attesa di dati.
• Caricamenti a livello di sezione — abbinalo a Empty mentre un pannello arriva in streaming.

Installazione#

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
Copia

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 }

Utilizzo#

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

Copia<Spinner />

Personalizzazione#

Puoi sostituire l'icona predefinita dello spinner con qualsiasi altra icona modificando il componente Spinner.

import { LoaderIcon } from "lucide-react"

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

Copiaimport { 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 }

Esempi#

Dimensione#

Usa la classe di utilità size-* per cambiare la dimensione dello spinner.

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

export function SpinnerSize() {

Button#

Aggiungi uno spinner a un pulsante per indicare uno stato di caricamento. Posiziona <Spinner /> prima dell'etichetta con data-icon="inline-start" per una posizione iniziale, o dopo l'etichetta con data-icon="inline-end" per una posizione finale.

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

Badge#

Aggiungi uno spinner a un badge per indicare uno stato di caricamento. Posiziona <Spinner /> prima dell'etichetta con data-icon="inline-start" per una posizione iniziale, o dopo l'etichetta con data-icon="inline-end" per una posizione finale.

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#

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità#

Lo spinner viene reso con role="status" e aria-label="Loading", quindi gli screen reader annunciano lo stato di caricamento senza cablaggi aggiuntivi. Quando un testo vicino descrive già lo stato (“Salvataggio…”), passa piuttosto aria-hidden="true" allo spinner — un annuncio basta. Per un’intera regione che entra in stato di caricamento, imposta aria-busy="true" sul contenitore.