Progress Bars
- Progress bar used to show a user how far along he is in a process
- Provide up-to-date feedback on the progress of a workflow
Default Progress Bar
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
<span class="sr-only">50% Complete</span>
</div>
</div>
Progress Bar with Lable
- With Lable in progress bar it will look like :
Labled Progress Bar
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50%
</div>
</div>
Progress Bars with colour & strip
- With colors in progress bar it will look like :
Colored Progress Bar
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="50" style="width:20%">
20%(Success)
</div>
Colored Progress Bar
<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% Complete (info)
</div>
</div>
Colored Progress Bar
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete(warning)
</div>
</div>
Active colored Progress Bar
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="55" aria- valuemin="0" aria-valuemax="100" style="width:55%">
55% Complete(danger)
</div>
</div>