PHP Bootstrap
PHP Bootstrap

      PHP Bootstrap
A toolbox for creating mobile friendly websites!


Progress Bars at PHP Bootstrap!

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

Basic Progress Bar

90% Complete 


<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
<span class="sr-only">90% Complete</span>
</div>
</div>

Progress Bar With Label

73% 


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

Contexual Progress Bars

100% charged (Success)
80% charged (Info)
35% charged (Warning)
25% charged (Danger) 


<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
100% charged (Success)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width:80%">
80% charged (Info)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="35"
aria-valuemin="0" aria-valuemax="100" style="width:35%">
35% charged (Warning)
</div>
</div>

<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100" style="width:25%">
25% charged (Danger)
</div>
</div>

Striped Progress Bars

83%
97% 


<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="83"
aria-valuemin="0" aria-valuemax="100" style="width:83%">
83%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="97"
aria-valuemin="0" aria-valuemax="100" style="width:97%">
97%
</div>
</div>

Animated Progress Bars

(Add "active" to the class)

83%
You have reached your maximum usage! Contact your support team for assistance. 


<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="83"
aria-valuemin="0" aria-valuemax="100" style="width:83%">
83%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
You have reached your maximum usage!  Contact your support team for assistance.
</div>
</div>

Stacked Progress Bar

10%
15%
20%
15% 


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


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


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

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

PHP Bootstrap