Progress Bar

Stacked bars, animated backgrounds, and text labels.

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don???t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

Basic

Use the .progress as a wrapper to indicate the max value of the progress bar and user the inner .progress-bar to indicate the progress so far.

  
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
                                                 
Color

Use the .bg-[brand | primary | success | info | warning | danger | dark | light] as a wrapper to indicate the max value of the progress bar and user the inner .progress-bar to change the appearance of individual progress bars.

  
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
                                                 
Labels

Add labels to your progress bars by
placing text within the .progress-bar.

50%
25%
45%
65%
85%
  
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
                                              
Multiple bars / Striped bar

Include multiple progress bars in a progress component if you need.

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar???s background color.

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

 
<!--Multiple bars-->
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!--Striped bars-->
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>