البناء · جديد

مؤشر التحميل

يخبر الناس أن شيئًا يجري حين لا يمكن معرفة المدة. مؤشر التحميل يضيف عنوانًا ووصفًا قصيرًا.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/spinner

الاستخدام

import { LoadingIndicator, Spinner } from "@/components/ui/spinner";

<LoadingIndicator title="Checking your balance" description="This usually takes a few seconds." />
<Spinner size={24} color="brand" label="Loading" />

أمثلة

الألوان والمقاسات والنقاط

color للعلامة أو الداكن أو الفاتح حسب السطح، وcurrent يتبع لون النص (في الأزرار). LoadingDots ثلاث نقاط تقفز. أضف label ليُعلَن.

مرجع الخصائص

LoadingIndicator

الخاصية	النوع	الافتراضي	الوصف
`title`	`ReactNode`	`“Loading…”`	خاصية Title: ما يجري تحميله.
`description`	`ReactNode`		خاصية Description.
`spinner`	`ReactNode`		خانة Spinner: أي مؤشر أو `LoadingDots`.

Spinner

الخاصية	النوع	الافتراضي	الوصف
`size`	`16 \| 20 \| 24 \| 32 \| 40 \| 48`		أو حدّده بـ`className`.
`color`	`"current" \| "brand" \| "dark" \| "light"`	`"current"`	خاصية Color، و`current` للون النص.
`label`	`ReactNode`		يجعله `role="status"` يعلن النص؛ بدونه زخرفي.

LoadingDots

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`		كما في Spinner.

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

ARIA

مؤشر التحميل role="status"، فيُعلَن عنوانه ووصفه.
تتوقف الحركة عند تفعيل تقليل الحركة.
لا تعرضه لانتظار أقل من ثانية، ولا أكثر من مؤشر في الشاشة.

ملاحظات العربية والاتجاه

ينعكس

النقاط تقفز بترتيب القراءة.

لا ينعكس

المؤشر يدور مع عقارب الساعة في الاتجاهين.

الأرقام: لا أرقام.
الخط العربي: العنوان label-14 بوزن Medium والوصف label-12؛ النص في الوسط.

كل المكونات ›