في هذا الدرس 6تصفّح المواضيع
تمنح أشرطة التقدم المستخدم طمأنينة بصرية فورية أثناء رفع ملف كبير، أو استكمال خطوات التسجيل، أو مراقبة استهلاك مساحة التخزين. يبني Bootstrap 5.3 شريط التقدم بعنصرين من عائلة <div> بدلاً من وسم المتصفح الجامد <progress> لضمان توحيد التصميم والتكديس والحركة عبر جميع المتصفحات: الحاوية الخارجية .progress التي تمثل المسار الكامل وتحمل سمات الإتاحة role="progressbar" وaria-valuenow، والعنصر الداخلي .progress-bar الذي يضبط عرض التعبئة البصري.
<div class="progress" role="progressbar"
aria-label="Upload progress" aria-valuenow="65"
aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 65%"></div>
</div>لإظهار النسبة المئوية مكتوبة داخل الشريط، اكتب النص مثل 65% مباشرةً داخل عنصر .progress-bar، وأضف .overflow-visible .text-dark إذا كانت النسبة ضئيلة جداً مثل 8% حتى لا ينقصّ النص الطويل. أما لتغيير سُمك الشريط فاضبط الارتفاع على الغلاف الأب .progress فقط عبر style="height: 20px" ليتمدد الشريط الداخلي تلقائياً بنفس الارتفاع.
<div class="progress" role="progressbar"
aria-label="Disk usage" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"
style="height: 22px">
<div class="progress-bar" style="width: 75%">75%</div>
</div>لوّن شريط التعبئة حسب دلالته الوظيفية باستخدام أدوات الخلفية القياسية مثل .bg-success لاكتمال الفحص أو .bg-danger لقرب امتلاء القرص. وعند وضع نص نسبة مئوية داخل شريط أصفر أو سماوي فاتح، استخدم .text-bg-warning أو .text-bg-info بدلاً من .bg-* وحده لضمان ظهور الأرقام باللون الأسود عالي الوضوح!
عند تقسيم سعة التخزين الواحدة إلى شرائح متعددة — مثل «النظام 30%» و«الوسائط 25%» و«النسخ الاحتياطي 15%» — قدّم Bootstrap 5.3 الحاوية المبتكرة .progress-stacked! نضع بداخلها عدة عناصر .progress مستقلة يحمل كل منها عرض شريحته وسمات aria-label وaria-valuenow الخاصة به، فيدمجها بوتستراب في شريط واحد متلاصق ومقروء بالكامل لقارئات الشاشة.
<div class="progress-stacked">
<div class="progress" role="progressbar"
aria-valuenow="30" style="width: 30%">
<div class="progress-bar"></div>
</div>
<div class="progress" role="progressbar"
aria-valuenow="25" style="width: 25%">
<div class="progress-bar bg-success"></div>
</div>
</div>يُضفي الكلاس .progress-bar-striped خطوطاً قطرية أنيقة مرسومة بتدرج CSS الخالص فوق أي لون خلفية دون تحميل صورة خارجية، وبإضافة الكلاس .progress-bar-animated تنساب تلك الخطوط بحركة مستمرة ناعمة تدل المستخدم على أن المعالجة جارية بالفعل ولم تتجمد الصفحة.
<div class="progress" role="progressbar"
aria-label="Indexing search catalog" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped
progress-bar-animated bg-info" style="width: 70%"></div>
</div>لتحديث شريط التقدم حياً أثناء رفع ملف أو تنفيذ خطوات متتالية عبر Vanilla JavaScript، تذكّر دائماً تحديث موضعين متلازمين في نفس الدالة: تحديث خاصية العرض bar.style.width = pct + "%" ونص التسمية على العنصر الداخلي .progress-bar، وتحديث السمة track.setAttribute("aria-valuenow", pct) على الحاوية الخارجية .progress؛ وبفضل انتقال transition: width .6s ease المدمج سينزلق الشريط بنعومة فائقة نحو القيمة الجديدة!
| المكوّن أو الكلاس | مكانه في شجرة DOM | الدور الهندسي في Bootstrap 5.3 |
|---|---|---|
.progress | الحاوية الخارجية الأب | يحمل role="progressbar" وسمات القيم والارتفاع |
.progress-bar | العنصر الداخلي الابن | يرسم عرض التعبئة البصري والتسمية والألوان |
.progress-stacked | غلاف لعدة عناصر .progress | يدمج شرائح متعددة مع احتفاظ كل شريحة بإتاحتها |
.progress-bar-striped | على .progress-bar | يرسم خطوطاً قطرية قابلة للتحريك مع -animated |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بنية شريط التقدم المحدثة في بوتستراب 5.3، وضبط التسميات والارتفاعات والألوان المتباينة، وتجميع الشرائح عبر progress-stacked، والخطوط القطرية المتحركة، ومزامنة التحديث البرمجي مع سمات ARIA. الخطوة التالية: انتقل الآن إلى الدرس التاسع والعشرين والأخير في هذه الدفعة لتعلّم بناء مؤشرات التحميل الدوارة والنابضة Spinners ودمجها داخل أزرار الإرسال.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Progress Track مسار شريط التقدم الخارجي
- الحاوية الخارجية التي تمثل المسار الكامل وتحمل دور شريط التقدم وسمات قيمته لقارئات الشاشة.
- للمراجعة
- 02 Stacked Progress Container حاوية الأشرطة المكدسة
- حاوية تضم عدة عناصر progress متجاورة لعرض شرائح متعددة داخل شريط واحد مع إتاحة مستقلة لكل شريحة.
- للمراجعة
- 03 Striped Progress Bar شريط التقدم المخطط
- كلاس يضيف خطوطاً قطرية عبر تدرج CSS فوق لون خلفية شريط التعبئة.
- للمراجعة
- 04 Animated Stripes الخطوط المتحركة
- كلاس يحرك الخطوط القطرية انسيابياً للدلالة على نشاط المهمة مع احترام تفضيل تقليل الحركة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ARIA ARIA
- Accessible Rich Internet Applications
- تزود قارئات الشاشة بدور شريط التقدم ونسبته الحالية وحدوده الدنيا والقصوى.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- ترسم التدرجات القطرية وانتقالات العرض الناعمة دون صور خارجية.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- شجرة العناصر التي تحدثها جافاسكريبت لمزامنة النسبة البصرية والسمعية معاً.
- للمراجعة
- 04 WCAG WCAG
- Web Content Accessibility Guidelines
- معايير الإتاحة المتحققة بتباين النصوص داخل الأشرطة واحترام تقليل الحركة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ شريط تقدم بارتفاع 22px يحمل role="progressbar" وقيمة 65 على الغلاف الخارجي وشريطاً داخلياً بكلاس text-bg-warning.
-
اجمع عنصرين مستقلين من .progress داخل حاوية .progress-stacked بحيث تحمل كل شريحة aria-label وaria-valuenow خاصين بها.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
أين توضع السمة role="progressbar" وسمة aria-valuenow في البنية القياسية لإصدار Bootstrap 5.3؟
نقل الإصدار 5.3 سمات role="progressbar" وaria-valuenow إلى الغلاف الخارجي .progress لضمان إتاحة القيم حتى عند 0%.
ما الحاوية القياسية في Bootstrap 5.3 لدمج عدة شرائح تقدم مستقلة في شريط واحد؟
قُدم الكلاس .progress-stacked في الإصدار 5.3 لدمج عدة عناصر .progress مع احتفاظ كل شريحة بسمات ARIA مستقلة.
لتغيير ارتفاع شريط التقدم في Bootstrap 5.3 يكفي ضبط الارتفاع على الغلاف الخارجي .progress فيتمدد .progress-bar تلقائياً.
نعم، لأن .progress هو حاوية Flexbox فيمتد .progress-bar تلقائياً بكامل ارتفاعها.
أي كلاسين يُستخدمان معاً لرسم خطوط قطرية متحركة فوق شريط التقدم؟
ينشئ .progress-bar-striped الخطوط بتدرج CSS ويضيف .progress-bar-animated حركة الانسياب المستمرة.
عند عرض نص نسبة مئوية داخل شريط تقدم أصفر تحذيري، أي كلاس يضمن تبايناً داكناً مقروءاً للأرقام؟
يضبط .text-bg-warning الخلفية الصفراء ويستبدل لون النص الأبيض الافتراضي باللون الداكن المقروء.
تتوقف حركة .progress-bar-animated تلقائياً إذا فعّل المستخدم تفضيل prefers-reduced-motion في نظام التشغيل.
نعم، يحترم بوتستراب استعلام prefers-reduced-motion: reduce فيوقف حركة الخطوط تلقائياً.
عند تحديث شريط التقدم برمجياً بالجافاسكريبت إلى 80%، ما التحديثان المتلازمان الواجب تنفيذهما معاً؟
تضمن مزامنة style.width مع aria-valuenow تطابق التقدم البصري مع ما تنطقه قارئات الشاشة.
لماذا يستخدم Bootstrap عنصري <div> لبناء شريط التقدم بدلاً من الاعتماد على وسم <progress> الأصيل؟
يصعب توحيد مظهر <progress> الأصيل أو وضع تسميات وشرائح مكدسة بداخله عبر المتصفحات المختلفة.