انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: أشرطة التقدم في بوتستراب 5

Striped Animated Progress الأشرطة المخططة والمتحركة

أتقن بناء أشرطة التقدم في بوتستراب 5.3 ببنيتها المحدثة لسمات الإتاحة، وضبط التسميات والارتفاعات والألوان، والأشرطة المكدسة والمخططة المتحركة، والتحديث البرمجي الحي.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يُضفي الكلاس .progress-bar-striped خطوطاً قطرية أنيقة مرسومة بتدرج CSS الخالص فوق أي لون خلفية دون تحميل صورة خارجية، وبإضافة الكلاس .progress-bar-animated تنساب تلك الخطوط بحركة مستمرة ناعمة تدل المستخدم على أن المعالجة جارية بالفعل ولم تتجمد الصفحة.

الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (أشرطة التقدم في بوتستراب 5)