شرح صفوف ومحتوى الفقرة
يُعد دمج المؤشر الصغير .spinner-border-sm داخل زر الإرسال مع تفعيل السمة disabled النمط القياسي الأهم في تطبيقات الإنتاج لمنع المستخدم من النقر المتكرر وإرسال النموذج مرتين! وفي Bootstrap 5.3 نمنح المؤشر المجاور لنص ظاهر سمة aria-hidden="true" بينما نضع role="status" على عنصر النص الظاهر نفسه مثل Saving...، أما إذا كان الزر يضم المؤشر وحده بلا نص فنرفق بداخله .visually-hidden.
| نمط مؤشر التحميل | الكلاسات القياسية في Bootstrap 5.3 | قاعدة التلوين والإتاحة |
|---|---|---|
| المؤشر الحلقي القياسي | .spinner-border | يتلون بـ .text-* مع role="status" ونص مخفي |
| المؤشر النابض النامي | .spinner-grow | يتمدد ويتلاشى دورياً عبر currentColor |
| المقاس المدمج الصغير | .spinner-border-sm / .spinner-grow-sm | مثالي داخل الأزرار وبجانب النصوص القصيرة |
| زر الإرسال قيد المعالجة | button[disabled] + .spinner-border-sm | أخفِ المؤشر بـ aria-hidden وضع role="status" للنص |
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm me-1"
aria-hidden="true"></span>
<span role="status">Saving changes...</span>
</button>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بناء مؤشرات التحميل الحلقية spinner-border والنابضة spinner-grow في بوتستراب 5.3، وتلوينها عبر currentColor، ومحاذاة أحجامها بمرونة، وتصميم أزرار الإرسال المتاحة قيد التحميل. الخطوة التالية: في الدرس الثلاثين القادم ستتعلم تصميم الهياكل المؤقتة التمهيدية Placeholders لتحسين الإدراك البصري لسرعة تحميل البطاقات والصفحات قبل وصول البيانات.