Bootstrap 3 Progress Bars are the predefined attractive element of bootstrap, A progress bar is mainly used to show how many presents of a task is completed graphically.
Normal Progress Bar
A normal progress bar is a blue background colored bar and to use any progress bar take a div and give the class name .progress and inside that take another div with the class name .progress-bar
Example:
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> <span class="sr-only">70% Complete</span> </div> </div>
Progress Bar With a Label
To give a label in a progress bar write ant text inside the dive with the class name .progress-bar
Example:
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% </div> </div>
Progress Bar With color
In bootstrap 3 there is 5 different colored progress bar and they are
- Deep Blue background or default progress bar (described above)
- Green background or Success progress bar
- Sky blue background or Info progress bar
- Yellow background or warning progress bar
- Red background or Danger progress bar
Green background or Success progress bar
To make a Green background or Success progress bar use class name .progress-bar-success
Example:
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% success
</div>
</div>
Sky blue background or Info progress bar
To make a Sky blue background or Info progress bar use class name .progress-bar-info
Example:
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% info
</div>
</div>
Yellow background or warning progress bar
To make a Yellow background or warning progress bar use class name .progress-bar-warning
Example:
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% warning
</div>
</div>
Red background or Danger progress bar
To make a Red background or Danger progress bar use class name .progress-bar-danger
Example:
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% danger
</div>
</div>
Progress Bar With Striped
to make a striped progress bar use class name .progress-bar-striped with its classes
Example:
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% success striped
</div>
</div>
Progress Bar With Animation
to make an animated progress bar use class name .avtive with its classes
Example:
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
Progress Bar With Multiple Color
To make a multi-colored progress bar take multiple div with the class name .progress-bar and give the class name for relevant colored progress bar inside a parent dive with the class name .progress
Example:
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>
I hope the tutorial Bootstrap 3 Progress Bars helped you, and please provide your comment to make the site better and more useful.
Thanks for Reading