شرح صفوف ومحتوى الفقرة
لتحديث شريط التقدم حياً أثناء رفع ملف أو تنفيذ خطوات متتالية عبر 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 ودمجها داخل أزرار الإرسال.