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
, andbg-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%"><...