Bootstrap Progress Bars

Whenever an action takes noticeable time—like uploading a file, submitting a long form, or loading an external database—it is considered vital User Experience (UX) design to display a Progress Bar.

Bootstrap makes generating and animating these tracking visuals incredibly straightforward.

---

1. Basic Structure

To create a progress bar, you must use two containers:

• The outer <div> with the .progress class acts as the track background.
• The inner <div> with the .progress-bar class acts as the filled visual element.

You control exactly how "full" the bar is by explicitly setting its width via inline CSS!

<div class="progress">
    <!-- Set the inline style to represent the loaded percentage -->
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

---

2. Adding Labels

If you want to explicitly state the progression percentage visibly to the user, you simply type the text directly inside the inner .progress-bar element.

<div class="progress">
    <!-- Notice the "65%" text injected naturally between the tags -->
    <div class="progress-bar" role="progressbar" style="width: 65%;">65%</div>
</div>

---

3. Height Alterations

You only need to change the inline CSS height attribute on the outer boundary element (.progress). The inner bar will automatically stretch vertically to fill the new container space.

<!-- Setting height on the outer track to exactly 5px tall -->
<div class="progress" style="height: 5px;">
    <div class="progress-bar" role="progressbar" style="width: 40%;"></div>
</div>

---

4. Contextual Colors

Need the bar to appear green on completion, or red on failure? Standard background utility classes mapping natively onto the inner .progress-bar.

<div class="progress">
    <!-- .bg-success maps perfectly over the internal bar fill -->
    <div class="progress-bar bg-success" style="width: 100%"></div>
</div>

---

5. Striped and Animated Patterns

To convey active movement (i.e. to let the user know the application isn't frozen), you can use CSS gradients and keyframes to animate the bar.

• .progress-bar-striped: Overlays the color with diagonal, translucent stripes.
• .progress-bar-animated: Causes those stripes to endlessly scan from left to right!

<!-- Combine striped and animated together to show endless movement -->
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 85%"></div>
</div>