29.8. fejezet: Haladásjelző sáv (progress bar)

Egyes weboldalak betöltésekor igen hasznos, ha különféle haladásjelzőket használunk. Erre való a .progress osztály, valamint a .progress-bar elem. Minta:
<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Az egyes elemek magasságát is lehet szabályozni a már megszokott height paraméterrel. Minta:
<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

A csík belsejébe feliratot, pl. %-értéket is lehet írni. Minta:
<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

A Bootstrap 4-ben megszokott színeket is lehet használni. Minta:
<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%">40%</div>
</div>

További érdekesség lehet a csíkozott (.progress-bar-striped), illetve az animált (.progress-bar-animated) haladásjelző. Ez utóbbira egy minta:
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp