في هذا الدرس 6تصفّح المواضيع
عندما تستغرق عملية جلب البيانات أو معالجة الدفع مدة غير محددة مسبقاً لا يمكن التعبير عنها بنسبة مئوية، نستخدم مؤشرات التحميل لطمأنة المستخدم بأن النظام يستجيب! يُبنى المؤشر الافتراضي .spinner-border في Bootstrap 5.3 بـ HTML وCSS الخالص دون أي صورة متحركة أو جافاسكريبت، ويشترط معيار الإتاحة تزويده بسمة role="status" وبداخله عنصر <span class="visually-hidden">Loading...</span> لقارئات الشاشة.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>يمكنك مواءمة لون مؤشر الدوران مع سياق اللوحة المحيطة باستخدام أي من كلاسات ألوان النصوص القياسية، مثل .text-primary للتحميل الرئيسي، و.text-success لمزامنة الخلفية، و.text-warning، و.text-light فوق الأسطح الداكنة.
<div class="d-flex gap-3">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Syncing...</span>
</div>
</div>إذا كنت تفضّل مؤشراً نابضاً هادئاً بدلاً من الحلقة الدوارة المستمرة، استبدل الكلاس الأساسي بـ .spinner-grow؛ حيث تتمدد دائرة مصمتة من الصفر حتى حجمها الكامل ثم تتلاشى بنعومة متكررة. ولأن خلفيتها مضبوطة أيضاً على background-color: currentColor، فهي تتلون بنفس كلاسات .text-* تماماً!
تُبنى المؤشرات في بوتستراب بخاصية display: inline-block حتى يسهل دمجها بجانب النصوص والأزرار، وبفضل ذلك يمكنك توسيطها أو محاذاتها في منتصف البطاقات والأقسام فوراً باستخدام حاويات Flexbox مثل .d-flex .justify-content-center، أو محاذاة النصوص .text-center، أو الهوامش .m-4.
<div class="d-flex align-items-center p-3 border rounded">
<strong role="status">Fetching cluster metrics...</strong>
<div class="spinner-border text-primary ms-auto"
aria-hidden="true"></div>
</div>لإدراج مؤشر تحميل رشيق بجانب سطر حالة أو داخل زر مدمج، أضف الكلاس الفرعي المطابق لنوع المؤشر: .spinner-border-sm للمؤشر الحلقي أو .spinner-grow-sm للمؤشر النابض. أما لتكبير المؤشر في شاشات الانتظار الرئيسية فاضبط المتغيرين المحليين --bs-spinner-width و--bs-spinner-height أو خاصيتي width وheight مباشرة.
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بناء مؤشرات التحميل الحلقية spinner-border والنابضة spinner-grow في بوتستراب 5.3، وتلوينها عبر currentColor، ومحاذاة أحجامها بمرونة، وتصميم أزرار الإرسال المتاحة قيد التحميل. الخطوة التالية: في الدرس الثلاثين القادم ستتعلم تصميم الهياكل المؤقتة التمهيدية Placeholders لتحسين الإدراك البصري لسرعة تحميل البطاقات والصفحات قبل وصول البيانات.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Border Spinner مؤشر الدوران الحلقي
- مؤشر تحميل دائري دوار مبني بـ CSS الخالص للدلالة على العمليات غير محددة المدة.
- للمراجعة
- 02 Growing Spinner مؤشر التحميل النابض
- مؤشر تحميل يتمدد من الصفر ويتلاشى بنبض متكرر عبر خاصية currentColor.
- للمراجعة
- 03 Small Spinner Modifier معدّل المؤشر الصغير
- كلاسات تصغير تجعل المؤشر متناسقاً مع ارتفاع السطر النصي وداخل الأزرار.
- للمراجعة
- 04 Loading Button Pattern نمط زر التحميل المعطل
- زر معطل مؤقتاً يجمع مؤشراً صغيراً مخفياً سمعياً بجانب نص حالة ظاهر لمنع تكرار الإرسال.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ARIA ARIA
- Accessible Rich Internet Applications
- توفر الدور role="status" للإعلان اللطيف عن بدء التحميل دون مقاطعة المستخدم.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- تشغل دوران ونبض المؤشرات بالكامل دون صور متحركة أو جافاسكريبت.
- للمراجعة
- 03 UX UX
- User Experience
- تتحسن بإظهار استجابة فورية داخل الزر تطمئن المستخدم وتمنع الحيرة أثناء الانتظار.
- للمراجعة
- 04 RTL RTL
- Right-to-Left
- تعكس الهوامش المنطقية تموضع المؤشر بجانب نص الزر تلقائياً في الواجهة العربية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
ضع عنصر spinner-grow ملوناً بكلاس text-info ومزوداً بـ role="status" ونص مخفي داخل حاوية مرنة متوسطة أفقياً.
-
أنشئ زراً معطلاً يحمل btn-primary وبداخله مؤشر spinner-border-sm بسمة aria-hidden="true" وبجانبه نص يحمل role="status".
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
أي عائلة كلاسات تُستخدم لتلوين مؤشرات .spinner-border و.spinner-grow في Bootstrap 5.3؟
يعتمد كلا المؤشرين على الكلمة المفتاحية currentColor الموروثة من خاصية color، لذا يتلونان عبر .text-*.
ما السمة الدلالية القياسية التي توضع على مؤشر التحميل المستقل لإعلام قارئات الشاشة بحالة الانتظار؟
تنشئ role="status" منطقة حية لطيفة تعلن رسالة التحميل الموضوعة داخل .visually-hidden.
أي كلاس يمنح مؤشر التحميل حركة تمدد ونبض متلاشٍ بدلاً من الحلقة الدوارة؟
الكلاس .spinner-grow هو المؤشر النابض الرسمي الثاني إلى جانب .spinner-border.
تعتمد مؤشرات التحميل في Bootstrap 5.3 على ملفات صور GIF متحركة وملف جافاسكريبت خاص لتشغيل دورانها.
خطأ؛ تُبنى مؤشرات بوتستراب بـ HTML وCSS الخالص عبر @keyframes دون أي صور أو جافاسكريبت.
ما الكلاس المخصص لتصغير حجم المؤشر الحلقي عند وضعه داخل زر إرسال؟
يصغّر .spinner-border-sm أبعاد الحلقة الدوارة إلى 1rem لتتناسق تماماً داخل الأزرار.
عند وضع مؤشر .spinner-border-sm بجانب نص ظاهر مثل "Saving..." داخل زر، ما نمط الإتاحة الأفضل في Bootstrap 5.3؟
يمنع إخفاء المؤشر الزخرفي بـ aria-hidden="true" ومنح النص الظاهر role="status" ازدواجية القراءة الصوتية.
عند تفعيل prefers-reduced-motion يبطّئ Bootstrap 5.3 سرعة حركة المؤشر إلى النصف بدلاً من تجميده كلياً.
نعم، يضاعف زمن الحركة لتهدئة الدوران مع إبقاء إشارة بصرية بأن التطبيق لم يتوقف عن الاستجابة.
متى يفضّل هندسياً استخدام المؤشر .spinner-border بدلاً من شريط التقدم .progress؟
تُستخدم المؤشرات للعمليات غير محددة النسبة كاستعلامات الشبكة، بينما تُستخدم أشرطة التقدم للنسب المقاسة.