Bootstrap Progress Bars
Progress bars visually show the completion status of a task, like a file upload or a multi-step form. Bootstrap builds them from a wrapping .progress div and an inner .progress-bar div with an inline width style.
You can color progress bars, add animated stripes, or stack multiple progress bars together to show different segments of a combined total.
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>Basic progress bars
The outer .progress div is the track, and the inner .progress-bar div represents the filled amount, controlled by an inline style="width: X%".
Striped and animated bars
Add .progress-bar-striped for a diagonal stripe pattern, and .progress-bar-animated to make the stripes move, giving a sense of active progress.
<div class="progress" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 70%">70%</div>
</div>A green progress bar filled to 70% of the track, showing the text 70%The inline width style controls how much of the bar is filled, and bg-success colors it green.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 45%"></div>
</div>A blue progress bar with moving diagonal stripes filled to 45%progress-bar-striped adds stripes, and progress-bar-animated makes them move for an active loading effect.
Key points
- The outer .progress div is the track; the inner .progress-bar shows the fill.
- Set the fill amount with an inline width percentage style.
- .progress-bar-striped adds a diagonal stripe pattern.
- .progress-bar-animated animates the stripes for a loading effect.