تقدم

وثائق وأمثلة لاستخدام أشرطة تقدم Bootstrap المخصصة التي تتميز بدعم الأشرطة المكدسة والخلفيات المتحركة والتسميات النصية.

كيف تعمل

تم تصميم مكونات التقدم باستخدام عنصري HTML ، وبعض CSS لتعيين العرض ، وبعض السمات. نحن لا نستخدم عنصر HTML5<progress> ، مما يضمن أنه يمكنك تكديس أشرطة التقدم وتحريكها ووضع تسميات نصية فوقها.

نستخدم .progressالغلاف كغلاف للإشارة إلى القيمة القصوى لشريط التقدم.
نستخدم الداخلي .progress-barللإشارة إلى التقدم المحرز حتى الآن.
يتطلب .progress-barنمطًا مضمنًا أو فئة أدوات مساعدة أو CSS مخصصًا لتعيين عرضها.
يتطلب أيضًا .progress-barبعض السمات لجعله متاحًا.rolearia

ضع كل ذلك معًا ، وستحصل على الأمثلة التالية.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

يوفر Bootstrap عددًا قليلاً من الأدوات المساعدة لضبط العرض . اعتمادًا على احتياجاتك ، قد تساعد هذه في تكوين التقدم بسرعة.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ملصقات

أضف تسميات إلى أشرطة التقدم عن طريق وضع نص داخل ملف .progress-bar.

25٪

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

ارتفاع

نقوم فقط بتعيين heightقيمة على .progress، لذلك إذا قمت بتغيير هذه القيمة ، .progress-barفسيتم تغيير الحجم الداخلي تلقائيًا وفقًا لذلك.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

الخلفيات

استخدم فئات الأداة المساعدة في الخلفية لتغيير مظهر أشرطة التقدم الفردية.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

قضبان متعددة

قم بتضمين أشرطة تقدم متعددة في مكون تقدم إذا كنت بحاجة.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

مخطط

أضف .progress-bar-stripedإلى أي شيء .progress-barلتطبيق شريط عبر تدرج CSS فوق لون خلفية شريط التقدم.

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

خطوط متحركة

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

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>