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 class=”progress-bar bg-warning” 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″
class=”progress-bar bg-warning” style=”width: 70%”>
</div>
</div>
Figure 4.21: Two progress bars created using the Bootstrap progress bar classes
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.