التحميل (Spinners) | مرجع Bootstrap

1. التحميل الدائري (Border Spinner)

الشكل الافتراضي للتحميل عبارة عن دائرة تدور.

المعاينة

spinner-border: الكلاس الأساسي لإنشاء شكل الدائرة التي تدور. هو عبارة عن حدود (Borders) شفافة جزئياً.
text-primary (وأخواتها): نظراً لأن شكل الـ Spinner مبني عن طريق الحدود والنصوص، يمكننا تغيير لونه باستخدام نفس كلاسات تغيير لون النص في بوتستراب!
visually-hidden: هذا الكلاس يخفي النص "جاري التحميل..." عن الشاشة لكن يجعله متاحاً لقارئات الشاشة (للمكفوفين).

بدلاً من الدوران، هذا الشكل ينبض ويكبر تدريجياً.

المعاينة

spinner-grow: الكلاس الأساسي لإنشاء تأثير النبض (تتحول النقطة إلى دائرة كبيرة تتلاشى).
نفس مبدأ الألوان ينطبق هنا باستخدام text-{color}.
role="status": يخبر المتصفحات أن هذا العنصر يمثل حالة التطبيق الحالية.

كيفية وضع مؤشر التحميل في المنتصف أو على الأطراف باستخدام كلاسات Flexbox.

المعاينة

في المنتصف (Center):

مع نص محاذي:

جاري إرسال البيانات...

لتوسيط التحميل: نضع الدائرة داخل عنصر أب div يملك كلاسات d-flex justify-content-center.
لمحاذاة الـ Spinner بجانب النص: استخدمنا d-flex align-items-center على الحاوية الأب (التي تضم النص والدائرة) لجعلهم في نفس الخط أفقياً.
ms-auto (Margin Start Auto): هذا الكلاس يقوم بدفع الـ Spinner إلى أقصى اليسار (أو اليمين في اللغة الإنجليزية) بعيداً عن النص.

أضف spinner-border-sm للحصول على حجم أصغر، ومناسب للاستخدام داخل عناصر أخرى.

المعاينة

spinner-border-sm أو spinner-grow-sm: تصغر الحجم الافتراضي (الذي هو تقريباً 2rem أو 32px) ليصبح 1rem (حوالي 16px).
هذا الحجم هو الأنسب إذا أردت استخدام الدوار داخل زر أو بجانب نص عادي.

من أفضل الاستخدامات: إظهار حالة التحميل بعد نقر المستخدم على زر الحفظ مثلاً.

المعاينة

نضع الـ Spinner (مضافاً إليه كلاس التصغير sm) بداخل الـ <button> ونضيف بجانبه النص.
disabled: من المهم جداً إضافة خاصية disabled للزر أثناء عملية التحميل، لمنع المستخدم من الضغط عليه مرة أخرى وإرسال الطلب (مثلا: الدفع) مرتين عن طريق الخطأ!