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%">&lt...