loading...

Bootstrap 4 – Progress indicators

Although unfitting of the context in which we are developing  MyPhoto, progress indicators form an important part of many user interfaces. As such, it is worth pointing out that Bootstrap comes with some very nice styles for the  progress element present in HTML5. To date, the following classes are available:

  • progress for applying a default progress bar style.
  • progress-bar for denoting the actual progress-bar element.
  • bg-*  for applying context styles. Specifically, bg-success , bg-info ,  bg-warning , and bg-danger .
  • progress-bar-striped for adding stripes to the progress bar, and  progress-animated for animating the added stripes (note that animations are not supported by all browsers currently).
  • progress-bar-animated for animating a striped progress bar.

Using the listed classes, we can create any number of differently styled progress bars (figure 4.21). Consider the given example:

<div class="progress">
    <div class="progress-bar bg-success" style="width: 50%"></div>
</div>
<div class="progress">
     <div  style="width: 70%"></div>
</div>

To improve accessibility, we should add the role="progressbar", aria-valuenow="50" and aria-valuemin="0" accessibility properties:

<div class="progress">
    <div
        role="progressbar"
        aria-valuenow="50"
        aria-valuemin="0"
        aria-valuemax="100"
        class="progress-bar bg-success"
        style="width: 50%">
    </div>
</div>
<div class="progress">
     <div
        role="progressbar"
        aria-valuenow="70"
        aria-valuemin="0"
        aria-valuemax="100"
         style="width: 70%">
    </div>
</div>
Figure 4.21: Two progress bars created using the Bootstrap progress bar classes

Comments are closed.

loading...