Examples 

<div class="progress mb-3"><div class="progress-bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress mb-3"><div class="progress-bar"role="progressbar"style="width:25%"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress mb-3"><div class="progress-bar"role="progressbar"style="width:50%"aria-valuenow="50"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress mb-3"><div class="progress-bar"role="progressbar"style="width:75%"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress"><div class="progress-bar"role="progressbar"style="width:100%"aria-valuenow="100"aria-valuemin="0"aria-valuemax="100"></div></div>

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.

  • We use the .progressas a wrapper to indicate the max value of the progress bar.
  • We use the inner .progress-barto indicate the progress so far.
  • The .progress-barrequires an inline style,utility class,or custom CSS to set their width.
  • The .progress-baralso requires some roleand ariaattributes to make it accessible.

Put that all together,and you have the following examples.

Height 

<div class="progress mb-3"style="height:3px;"><div class="progress-bar"role="progressbar"style="width:25%;"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100">25%</div></div><div class="progress mb-3"style="height:10px;"><div class="progress-bar"role="progressbar"style="width:50%;"aria-valuenow="50"aria-valuemin="0"aria-valuemax="100">50%</div></div><div class="progress mb-3"style="height:15px;"><div class="progress-bar"role="progressbar"style="width:75%;"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100">75%</div></div><div class="progress"style="height:20px;"><div class="progress-bar"role="progressbar"style="width:99%;"aria-valuenow="99"aria-valuemin="0"aria-valuemax="100">99%</div></div>

We only set a heightvalue on the .progress,so if you change that value the inner .progress-barwill automatically resize accordingly.

25%
50%
75%
99%

Animated stripes 

<div class="progress mb-3"><div class="progress-bar progress-bar-striped progress-bar-animated"role="progressbar"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100"style="width:75%"></div></div><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated bg-success"role="progressbar"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100"style="width:75%"></div></div>

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

Labels 

<div class="progress mb-3"><div class="progress-bar"role="progressbar"style="width:25%;"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100">25%</div></div><div class="progress mb-3"><div class="progress-bar"role="progressbar"style="width:50%;"aria-valuenow="50"aria-valuemin="0"aria-valuemax="100">50%</div></div><div class="progress mb-3"><div class="progress-bar"role="progressbar"style="width:75%;"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100">75%</div></div><div class="progress"><div class="progress-bar"role="progressbar"style="width:99%;"aria-valuenow="99"aria-valuemin="0"aria-valuemax="100">99%</div></div>

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

25%
50%
75%
99%

Backgrounds 

<div class="progress mb-3"><div class="progress-bar bg-success"role="progressbar"style="width:25%"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress mb-3"><div class="progress-bar bg-info"role="progressbar"style="width:50%"aria-valuenow="50"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress mb-3"><div class="progress-bar bg-warning"role="progressbar"style="width:75%"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress"><div class="progress-bar bg-danger"role="progressbar"style="width:100%"aria-valuenow="100"aria-valuemin="0"aria-valuemax="100"></div></div>

Use background utility classes to change the appearance of individual progress bars.

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>

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

Striped 

<div class="progress mb-3"><div class="progress-bar progress-bar-striped"role="progressbar"style="width:10%"aria-valuenow="10"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress mb-3"><div class="progress-bar progress-bar-striped bg-success"role="progressbar"style="width:25%"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress mb-3"><div class="progress-bar progress-bar-striped bg-info"role="progressbar"style="width:50%"aria-valuenow="50"aria-valuemin="0"aria-valuemax="100"></div></div><div class="progress mb-3"><div class="progress-bar progress-bar-striped bg-warning"role="progressbar"style="width:75%"aria-valuenow="75"aria-valuemin="0"aria-valuemax="100"></div></div><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>

Add .progress-bar-stripedto any .progress-barto apply a stripe via CSS gradient over the progress bar’s background color.