Your "Source Code" Resource for PHP and Bootstrap Development

Start Here Basic Page Setup || Navigation Bars || Column Grids || Buttons || Modal Generators || Bootstrap Icons || Badges & Labels || Progress Bars || Themes || Plugins

---

Progress Bars

Section 8

A progress bar can be used to show a visitor where they are in a certain phase or process. Bootstrap provides a simple and flexible way to create progress bars to indicate that progress. You can customize the appearance by adjusting properties such as color, width, and animation.

---

Basic Progress Bar

<div class="progress" style="height: 25px;">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Progress Bar With Label

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

Contexual Progress Bars

<div class="progress" style="height: 25px;">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>

Striped Progress Bars

<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 23%" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 49%" aria-valuenow="49" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 87%" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animated Progress Bars

<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped bg-primary progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" 
		aria-valuemax="100" style="width: 75%">75%</div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" aria-valuenow="60" aria-valuemin="0" 
		aria-valuemax="100" style="width: 60%">60%</div>
</div>

Stacked Progress Bar

<div class="progress" style="height: 25px;">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%">
10%
</div>

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

<div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" aria-valuenow="20" aria-valuemin="0" 
		aria-valuemax="100" style="width:20%">
20%
</div>
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" aria-valuenow="15" aria-valuemin="0" 
		aria-valuemax="100" style="width:15%">
15%
</div>
</div>