مؤشّر تحميل
Spinnerمؤشّر تحميل غير محدّد في React يتبع حجم النص ولونه الحاليين، بأحجام ودرجات وتسمية متاحة افتراضيًا.
يعرض Spinner عملًا غير معروف مدته. حجمه الافتراضي 1em ويتبع currentColor، فيتناسب مع النص المحيط به.
متى تستخدمه
استخدم Spinner أثناء تحميل شيء مجهول المدّة: جلب قائمة، أو إرسال طلب، أو التحقّق من حالة. داخل Button استخدم الخاصية loading بدلًا منه، فهي تضع المؤشّر لك.
حين تكون المدّة أو التقدّم معروفَين، استخدم Progress. لعناصر نائبة للمحتوى، استخدم Skeleton.
أمثلة
الخصائص
الخصائص التي يعرّفها Spinner. سمات العنصر الأصلي تمرّ كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | "lg" | "xl" | ||
tone | "primary" | "onColor" | "neutral" | ||
aria-label | string | Defines a string value that labels the current element.
Accessible label announced by screen readers. Defaults to "Loading".
Pass aria-hidden="true" (e.g. inside a Button that already has its
own label) to suppress. |
إمكانية الوصول
يعلن Spinner «جارٍ التحميل» افتراضيًا عبر aria-label؛ مرّر تسميتك لتقول ما الذي يُحمَّل. داخل أداة لها تسمية أصلًا مرّر aria-hidden="true" لتجنّب الإعلان المزدوج.
اقرن المؤشّر بـ aria-busy="true" على المنطقة التي تُحمَّل لتُعرض الحالة للتقنيات المساعدة.