Ladeanzeige

import {
  Item,
  ItemContent,

Der Spinner ist ein einzelnes animiertes Icon, das einen laufenden Vorgang signalisiert. Er umhüllt das LoaderIcon aus lucide-react mit animate-spin und bringt role="status" samt aria-label von Haus aus mit – keine Primitive-Bibliothek im Spiel, beide Backends teilen sich also dieselbe Implementierung, und über currentColor passt er sich farblich jedem neobrutalistischen Steuerelement an, in dem er sitzt.

Typische Anwendungsfälle:

• Laufende Submits – tausche ihn in einen Button ein, während die Mutation läuft; das Label bleibt stehen.
• Inline-Ladezustände – Badges, Input-Groups und Tabellenzellen, die auf Daten warten.
• Ladezustände auf Abschnittsebene – kombiniere ihn mit Empty, während ein Panel hereinstreamt.

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
Kopieren

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 }

Verwendung#

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

Kopieren<Spinner />

Anpassung#

Du kannst das Standard-Spinner-Icon durch ein beliebiges anderes Icon ersetzen, indem du die Komponente Spinner bearbeitest.

import { LoaderIcon } from "lucide-react"

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

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

Beispiele#

Größe#

Verwende die Utility-Klasse size-*, um die Größe des Spinners zu ändern.

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

export function SpinnerSize() {

Button#

Füge einem Button einen Spinner hinzu, um einen Ladezustand anzuzeigen. Platziere <Spinner /> vor dem Label mit data-icon="inline-start" für eine Position am Anfang oder nach dem Label mit data-icon="inline-end" für eine Position am Ende.

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

Badge#

Füge einem Badge einen Spinner hinzu, um einen Ladezustand anzuzeigen. Platziere <Spinner /> vor dem Label mit data-icon="inline-start" für eine Position am Anfang oder nach dem Label mit data-icon="inline-end" für eine Position am Ende.

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#

Um RTL-Unterstützung in Neobrutalism zu aktivieren, siehe die RTL-Konfigurationsanleitung.

"use client"

import * as React from "react"

Barrierefreiheit#

Der Spinner rendert role="status" mit aria-label="Loading", Screenreader kündigen den Ladezustand also ohne weitere Verdrahtung an. Beschreibt benachbarter Text den Zustand bereits („Wird gespeichert …“), gib dem Spinner stattdessen aria-hidden="true" – eine Ankündigung genügt. Wechselt eine ganze Region in einen Ladezustand, setze aria-busy="true" auf den Container.