PHP Bootstrap Template
Take $3 OFF, with coupon code "SAVE-3"
Buy Now - Sale Price: $10
You will get a ZIP (3MB) file

Progress Bars -PHP Bootstrap Template - Purchase and download files instantly!!

Progress Bars with the PHP Bootstrap Template!

A progress bar can be used to show a visitor where they are in a certain phase or process.

Navigation Bars || Column Grids || Buttons || Badges & Labels || Progress Bars

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

75%



<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

25%

50%

75%

100%



<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

75%

60%



<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

10%

15%

20%

15%


<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>

Ready to get started, or have questions? Reach out to us today!