Spinner

import {
  Item,
  ItemContent,

Spinner adalah satu ikon beranimasi yang menandakan sebuah operasi sedang berjalan. Komponen ini membungkus LoaderIcon dari lucide-react dengan animate-spin dan sudah menyertakan role="status" plus aria-label bawaan — tanpa pustaka primitif apa pun, sehingga kedua backend memakai implementasi yang sama, dan ia mewarisi currentColor agar serasi dengan kontrol neobrutalis mana pun yang menampungnya.

Cocok digunakan untuk:

• Pengiriman yang tertunda — sisipkan ke dalam tombol selagi mutasi berjalan; labelnya tetap di tempat.
• Status pengambilan data sebaris — badge, grup input, dan sel tabel yang sedang menunggu data.
• Pemuatan setingkat bagian — padukan dengan Empty selagi sebuah panel dimuat.

Instalasi#

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
Salin

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 }

Penggunaan#

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

Salin<Spinner />

Kustomisasi#

Anda dapat mengganti ikon spinner default dengan ikon lain apa pun dengan mengedit komponen Spinner.

import { LoaderIcon } from "lucide-react"

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

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

Contoh#

Ukuran#

Gunakan kelas utilitas size-* untuk mengubah ukuran spinner.

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

export function SpinnerSize() {

Button#

Tambahkan spinner ke tombol untuk menunjukkan status pemuatan. Tempatkan <Spinner /> sebelum label dengan data-icon="inline-start" untuk posisi awal, atau setelah label dengan data-icon="inline-end" untuk posisi akhir.

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

Badge#

Tambahkan spinner ke badge untuk menunjukkan status pemuatan. Tempatkan <Spinner /> sebelum label dengan data-icon="inline-start" untuk posisi awal, atau setelah label dengan data-icon="inline-end" untuk posisi akhir.

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#

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas#

Spinner merender role="status" dengan aria-label="Loading", sehingga pembaca layar mengumumkan status memuat tanpa perkabelan tambahan. Bila teks di dekatnya sudah menjelaskan statusnya ("Menyimpan…"), berikan aria-hidden="true" pada spinner saja — satu pengumuman sudah cukup. Untuk seluruh wilayah yang beralih ke status memuat, setel aria-busy="true" pada kontainernya.