Yükleniyor

import {
  Item,
  ItemContent,

Spinner, devam eden bir işlemi belirten tek bir animasyonlu simgedir. lucide-react kütüphanesindeki LoaderIcon simgesini animate-spin ile sarar ve role="status" ile bir aria-label'ı hazır olarak sunar — arada bir primitif kütüphane yoktur, bu yüzden her iki backend de aynı implementasyonu paylaşır; currentColor'ı miras alarak içinde bulunduğu neobrütalist kontrole uyum sağlar.

Şu durumlarda tercih edin:

• Bekleyen gönderimler — mutasyon çalışırken düğmenin içine yerleştirin; etiket yerinde kalır.
• Satır içi bekleme durumları — veri bekleyen rozetler, giriş grupları ve tablo hücreleri.
• Bölüm düzeyinde yüklemeler — bir panel akışla gelirken Empty ile birlikte kullanın.

Kurulum#

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
Kopyala

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 }

Kullanım#

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

Kopyala<Spinner />

Özelleştirme#

Spinner bileşenini düzenleyerek varsayılan spinner simgesini başka herhangi bir simgeyle değiştirebilirsiniz.

import { LoaderIcon } from "lucide-react"

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

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

Örnekler#

Boyut#

Spinner'ın boyutunu değiştirmek için size-* yardımcı sınıfını kullanın.

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

export function SpinnerSize() {

Button#

Bir yükleme durumunu göstermek için bir düğmeye spinner ekleyin. Başlangıç konumu için <Spinner />'ı etiketten önce data-icon="inline-start" ile, bitiş konumu için etiketten sonra data-icon="inline-end" ile yerleştirin.

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

Badge#

Bir yükleme durumunu göstermek için bir rozete spinner ekleyin. Başlangıç konumu için <Spinner />'ı etiketten önce data-icon="inline-start" ile, bitiş konumu için etiketten sonra data-icon="inline-end" ile yerleştirin.

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#

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik#

Spinner, aria-label="Loading" ile role="status" olarak işlenir; böylece ekran okuyucular yükleme durumunu ek bir kurulum olmadan duyurur. Yakındaki metin durumu zaten anlatıyorsa ("Kaydediliyor…"), spinner'a bunun yerine aria-hidden="true" geçirin — tek duyuru yeterlidir. Yükleme durumuna geçen bir bölgenin tamamı içinse kapsayıcıya aria-busy="true" verin.