اسپینر

import {
  Item,
  ItemContent,

Spinner یک آیکون انیمیشنی واحد است که عملیات در حال انجام را سیگنال می‌دهد. LoaderIcon از lucide-react را با animate-spin می‌پیچد و از جعبه role="status" به‌همراه aria-label می‌فرستد — بدون کتابخانهٔ primitive، پس هر دو backend همان پیاده‌سازی را دارند و currentColor را به ارث می‌برد تا با هر کنترل نئوبروتالیستی که داخلش می‌نشیند جور شود.

برای این موارد از آن استفاده کنید:

• Submit در انتظار — هنگام اجرای mutation آن را داخل دکمه عوض کنید؛ برچسب سر جایش می‌ماند.
• وضعیت fetch درون‌خطی — بج، گروه ورودی و سلول جدول در انتظار داده.
• بارگذاری سطح بخش — با Empty جفتش کنید وقتی پنل stream می‌شود.

نصب#

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
کپی

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 }

استفاده#

کپیimport { Spinner } from "@/components/ui/spinner"

کپی<Spinner />

سفارشی‌سازی#

می‌توانید با ویرایش کامپوننت Spinner آیکون پیش‌فرض اسپینر را با هر آیکون دیگری جایگزین کنید.

import { LoaderIcon } from "lucide-react"

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

کپیimport { 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 }

نمونه‌ها#

اندازه#

برای تغییر اندازهٔ اسپینر از کلاس ابزاری size-* استفاده کنید.

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

export function SpinnerSize() {

Button#

برای نشان‌دادن وضعیت بارگذاری، یک اسپینر به دکمه اضافه کنید. <Spinner /> را برای موقعیت ابتدایی با data-icon="inline-start" پیش از برچسب، یا برای موقعیت انتهایی با data-icon="inline-end" پس از برچسب قرار دهید.

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

Badge#

برای نشان‌دادن وضعیت بارگذاری، یک اسپینر به نشان اضافه کنید. <Spinner /> را برای موقعیت ابتدایی با data-icon="inline-start" پیش از برچسب، یا برای موقعیت انتهایی با data-icon="inline-end" پس از برچسب قرار دهید.

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#

برای فعال‌کردن پشتیبانی از RTL در Neobrutalism، راهنمای پیکربندی RTL را ببینید.

"use client"

import * as React from "react"

دسترسی‌پذیری#

Spinner مقدار role="status" با aria-label="Loading" رندر می‌کند تا صفحه‌خوان وضعیت بارگذاری را بدون سیم‌کشی اضافه اعلام کند. وقتی متن نزدیک از قبل وضعیت را توصیف می‌کند («در حال ذخیره…»)، به‌جای آن aria-hidden="true" به spinner بدهید — یک اعلام کافی است. برای کل ناحیه‌ای که به حالت بارگذاری می‌رود، aria-busy="true" را روی کانتینر بگذارید.