Indicateur de chargement

import {
  Item,
  ItemContent,

Le spinner est une simple icône animée qui signale une opération en cours. Il enveloppe la LoaderIcon de lucide-react avec animate-spin et fournit d’office role="status" et un aria-label — aucune bibliothèque de primitives en jeu, donc les deux backends partagent la même implémentation, et il hérite de currentColor pour s’accorder au contrôle néobrutaliste qui l’accueille.

À privilégier dans ces cas :

• Envois en attente — glissez-le dans un bouton pendant que la mutation s’exécute ; le libellé reste en place.
• États de chargement en ligne — badges, groupes de champs et cellules de tableau en attente de données.
• Chargements de section — associez-le à Empty pendant qu’un panneau se remplit.

Installation#

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
Copier

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 }

Utilisation#

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

Copier<Spinner />

Personnalisation#

Vous pouvez remplacer l’icône par défaut du spinner par n’importe quelle autre icône en modifiant le composant Spinner.

import { LoaderIcon } from "lucide-react"

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

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

Exemples#

Taille#

Utilisez la classe utilitaire size-* pour modifier la taille du spinner.

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

export function SpinnerSize() {

Button#

Ajoutez un spinner à un bouton pour signaler un état de chargement. Placez <Spinner /> avant le libellé avec data-icon="inline-start" pour une position de début, ou après le libellé avec data-icon="inline-end" pour une position de fin.

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

Badge#

Ajoutez un spinner à un badge pour signaler un état de chargement. Placez <Spinner /> avant le libellé avec data-icon="inline-start" pour une position de début, ou après le libellé avec data-icon="inline-end" pour une position de fin.

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#

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité#

Le spinner rend role="status" avec aria-label="Loading", si bien que les lecteurs d’écran annoncent l’état de chargement sans câblage supplémentaire. Quand un texte voisin décrit déjà l’état (« Enregistrement… »), passez plutôt aria-hidden="true" au spinner — une seule annonce suffit. Pour toute une région qui bascule en chargement, posez aria-busy="true" sur le conteneur.