مؤشر تحميل

import {
  Item,
  ItemContent,

الرمز الدوار هو أيقونة متحركة واحدة تشير إلى وجود عملية جارية. وهو يلف الرمز LoaderIcon من lucide-react بـ 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#

لتفعيل RTL في Neobrutalism، راجع دليل إعداد RTL.

"use client"

import * as React from "react"

إمكانية الوصول#

يقوم مؤشر التحميل بعرض role="status" وaria-label="Loading"، وبالتالي تقوم برامج قراءة الشاشة بالإعلان عن حالة التحميل دون الحاجة إلى إعدادات إضافية. وعندما يكون النص المجاور يصف الحالة بالفعل («جاري الحفظ...»)، قم بتمرير aria-hidden="true" إلى مؤشر التحميل بدلاً من ذلك — حيث يكفي إعلان واحد. بالنسبة لمنطقة كاملة تتحول إلى حالة التحميل، قم بتعيين aria-busy="true" على الحاوية.