Wskaźnik ładowania

import {
  Item,
  ItemContent,

Spinner to pojedyncza animowana ikona sygnalizująca operację w toku. Opakowuje LoaderIcon z biblioteki lucide-react w animate-spin i od ręki dostarcza role="status" oraz aria-label — bez żadnej biblioteki prymitywów, więc oba backendy dzielą tę samą implementację, a dzięki dziedziczeniu currentColor dopasowuje się kolorem do neobrutalistycznej kontrolki, w której się znajduje.

Sięgnij po to rozwiązanie, gdy:

• Oczekujące wysyłki formularzy — wstaw go do przycisku na czas trwania mutacji; etykieta zostaje na miejscu.
• Stany pobierania inline — badge'e, grupy pól i komórki tabeli czekające na dane.
• Ładowanie na poziomie sekcji — połącz go z Empty, gdy zawartość panelu dopiero się wczytuje.

Instalacja#

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
Kopiuj

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 }

Użycie#

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

Kopiuj<Spinner />

Dostosowywanie#

Możesz zastąpić domyślną ikonę spinnera dowolną inną ikoną, edytując komponent Spinner.

import { LoaderIcon } from "lucide-react"

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

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

Przykłady#

Rozmiar#

Użyj klasy narzędziowej size-*, aby zmienić rozmiar spinnera.

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

export function SpinnerSize() {

Button#

Dodaj spinner do przycisku, aby wskazać stan ładowania. Umieść <Spinner /> przed etykietą z data-icon="inline-start" dla pozycji na początku lub po etykiecie z data-icon="inline-end" dla pozycji na końcu.

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

Badge#

Dodaj spinner do plakietki, aby wskazać stan ładowania. Umieść <Spinner /> przed etykietą z data-icon="inline-start" dla pozycji na początku lub po etykiecie z data-icon="inline-end" dla pozycji na końcu.

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#

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność#

Spinner renderuje role="status" z aria-label="Loading", więc czytniki ekranu ogłaszają stan ładowania bez dodatkowego podpinania. Gdy sąsiedni tekst już opisuje ten stan („Zapisywanie…”), przekaż spinnerowi aria-hidden="true" — jedno ogłoszenie wystarczy. Dla całego regionu przechodzącego w stan ładowania ustaw aria-busy="true" na kontenerze.