טוען

import {
  Item,
  ItemContent,

ה-spinner הוא אייקון מונפש יחיד שמסמן פעולה בתהליך. הוא עוטף את LoaderIcon מ-lucide-react עם animate-spin ומגיע עם role="status" ועוד aria-label מהקופסה — בלי ספריית פרימיטיבים, כך ששני ה-backends חולקים את אותה מימוש, והוא יורש currentColor כדי להתאים לכל בקרה נאו-ברוטליסטית שהוא יושב בה.

השתמשו בו כש:

• שליחות ממתינות — מחליפים אותו לתוך כפתור בזמן שהמוטציה רצה; התווית נשארת במקום.
• מצבי fetch בשורה — badges, קבוצות input ותאי טבלה שממתינים לנתונים.
• טעינות ברמת מקטע — מחברים אותו ל-Empty בזמן שפאנל זורם פנימה.

התקנה#

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 }

דוגמאות#

גודל#

השתמשו במחלקת ה-utility‏ 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" על המיכל.