स्पिनर

import {
  Item,
  ItemContent,

स्पिनर एक ही एनिमेटेड आइकन है, जो बताता है कि कोई ऑपरेशन चल रहा है। यह lucide-react के LoaderIcon को animate-spin के साथ रैप करता है और role="status" के साथ एक aria-label पहले से लेकर आता है — इसमें कोई प्रिमिटिव लाइब्रेरी शामिल नहीं है, इसलिए दोनों बैकएंड एक ही इंप्लीमेंटेशन साझा करते हैं, और यह currentColor अपनाकर उस नियोब्रूटलिस्ट कंट्रोल से घुल-मिल जाता है जिसमें बैठा हो।

इसे इन स्थितियों में चुनें:

• पेंडिंग सबमिट — म्यूटेशन चलने के दौरान इसे बटन में रख दें; लेबल अपनी जगह बना रहता है।
• इनलाइन फ़ेच स्टेट — डेटा का इंतज़ार करते बैज, इनपुट ग्रुप और टेबल सेल।
• सेक्शन-स्तर की लोडिंग — पैनल स्ट्रीम होते समय इसे 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 }

उदाहरण#

आकार#

स्पिनर का आकार बदलने के लिए 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#

Neobrutalism में RTL समर्थन सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें।

"use client"

import * as React from "react"

एक्सेसिबिलिटी#

स्पिनर aria-label="Loading" के साथ role="status" रेंडर करता है, इसलिए स्क्रीन रीडर अतिरिक्त वायरिंग के बिना लोडिंग स्थिति की घोषणा करते हैं। जब आस-पास का टेक्स्ट यह स्थिति पहले से बता रहा हो ("सेव हो रहा है…"), तो स्पिनर पर aria-hidden="true" लगा दें — एक घोषणा काफ़ी है। पूरा क्षेत्र लोडिंग स्थिति में जा रहा हो, तो कंटेनर पर aria-busy="true" सेट करें।