In bootstrap progress bars are used to show the graphs of progress or any action in the form of progress bars. In this chapter progress bar is briefly explained.
Default Progress Bar
In this example a div with progress class is used
and between this a progress-bar class is used to make a progress
bar.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
<span class="sr-only">60% Complete</span>
</div>
</div>
Output of above code
Label in progress bar
In this example span element with sr-only class
is removed to show the label in the progress bar.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete
</div>
</div>
Output of above code
Contextual progress bar
In this example background colors of progress bars are
used by different bg classes.
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Completed
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Completed
</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%">
35% Completed
</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="25" style="width:25%">
25% Completed
</div>
</div>
Output of above code
35% Completed
Multiple progress bars
In this example all the progress bars are added in
the progress class.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%">
35%
</div>
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%">
25%
</div>
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%">
10%
</div>
</div>
Output of above code
Stripped progress bars
In this example progress-bar-striped class is used
in each progress bar to make all the progress bar stripped.
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Completed
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Completed
</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%">
35% Completed
</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="25" style="width:25%">
25% Completed
</div>
</div>
Output of above code
35% Completed
Animated progress bar
In this example progress-bar-animated class is used
to make a stripped progress bar animated.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Completed
</div>
</div>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
