Laadindicator

import {
  Item,
  ItemContent,

De spinner is één geanimeerd icoon dat een lopende operatie aangeeft. Hij wikkelt de LoaderIcon uit lucide-react in animate-spin en levert standaard role="status" plus een aria-label mee — er komt geen primitive-bibliotheek aan te pas, dus beide backends delen dezelfde implementatie, en hij erft currentColor, zodat hij meekleurt met welk neobrutalistisch element hij ook in zit.

Ideaal voor:

• Lopende verzendingen — wissel hem in een knop in terwijl de mutatie draait; het label blijft staan.
• Inline laadstatussen — badges, invoergroepen en tabelcellen die op data wachten.
• Laden op sectieniveau — combineer hem met Empty terwijl een paneel binnenstroomt.

Installatie#

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
Kopiëren

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 }

Gebruik#

Kopiërenimport { Spinner } from "@/components/ui/spinner"

Kopiëren<Spinner />

Aanpassing#

Je kunt het standaard spinner-icoon vervangen door een willekeurig ander icoon door de component Spinner te bewerken.

import { LoaderIcon } from "lucide-react"

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

Kopiërenimport { 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 }

Voorbeelden#

Formaat#

Gebruik de utility-klasse size-* om het formaat van de spinner te wijzigen.

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

export function SpinnerSize() {

Button#

Voeg een spinner toe aan een knop om een laadstatus aan te geven. Plaats <Spinner /> vóór het label met data-icon="inline-start" voor een positie aan het begin, of na het label met data-icon="inline-end" voor een positie aan het einde.

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

Badge#

Voeg een spinner toe aan een badge om een laadstatus aan te geven. Plaats <Spinner /> vóór het label met data-icon="inline-start" voor een positie aan het begin, of na het label met data-icon="inline-end" voor een positie aan het einde.

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#

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid#

De spinner rendert role="status" met aria-label="Loading", zodat schermlezers de laadstatus aankondigen zonder extra koppelwerk. Wanneer tekst ernaast de status al beschrijft ("Opslaan…"), geef de spinner dan juist aria-hidden="true" mee — één aankondiging is genoeg. Zet voor een hele regio die naar een laadstatus omschakelt aria-busy="true" op de container.