شرائط التقدّم في إطار العمل Bootstrap

يأتي إطار العمل Bootstrap مضمَّنًا مبدئيًّا بمكوِّن شرائط تقدّم تدعم تنظيم الشرائط عموديًّا وتحريك الخلفيّات وإضافة لافتات نصيّة.

آلية العمل

تُبنَى مكوِّنات شرائط التقدّم في إطار العمل Bootstrap باستخدام عنصُريْ HTML، وأنماط CSS لتعيين العرض وبضعة خاصيّات. لا يستخدم مكوِّن شرائط التقدّم عنصُر <progress> لضمان إمكانيّة تكديس شرائط التقدّم ، وتحريكها ووضع لافتات نصيّة عليها.

يُستخدَم الصنف ‎.progress لتغليف شريط التقدّم وللإشارة إلى القيمة العليا للشريط.
يُستخدَم الصنف ‎.progress-bar داخل شريط التقدّم للإشارة إلى القيمة التي وصل إليها الشريط.
يتطلّب الصنف ‎.progress-bar نمطًا سطريًّا، أو صنفًا خدميًّا أو أنماط CSS مُخصَّصة لتعيين عرضها.
يتطلّب الصنف ‎.progress-bar خاصيّات role وaria لجعله سهل الوصول.

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

<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.

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

الارتفاع

تُحدَّد قيمة الارتفاع مبدئيًّا بالصنف ‎.progress. كلّ ما عليك فعله لتغيير الارتفاع المبدئي هو تعديل ارتفاع العنصُر المغلِّف (‎.progress) وسيتغيّر ارتفاع شريط التقدّم تلقائيًّا تبعًا لذلك.

<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 لتطبيق تنسيق مُخطَّط على الشريط عبر القيمة gradient في 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>

مصادر

صفحة Progress في توثيق Bootstrap.