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