Bootstrap is offering progress bar feature we will discuss about that in this article. The function of bootstrap progress bars is to show that how much the process has been done and how in progress.
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
Default Progress Bar
Following steps will help you to create a basic progress bar:
Make a <div> and assign a class of .progress.
Then within the above <div>, insert an empty <div> with .progress class.
To show the percentage add style attribute with the width. Like in the example style="60%", this indicates that progress has been done 60%.
Let us see an example below:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% Complete</span>
</div>
</div>
With label
Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label’s text is fully visible.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Low percentages
Progress bars representing low single digit percentages, as well as 0%, include a min-width: 20px; for legibility.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
2%
</div>
</div>
Alternate Progress Bar
Following steps will help you to create a progress bar with different styles:
Make a <div> and assign a class of .progress.
Then within the above <div>, insert an empty <div> with .progress class and progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger.
To show the percentage add style attribute with the width. Like in the example style="60%", this indicates that progress has been done 60%.
Let us see an example below:
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% Complete (info)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20%Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Striped Progress Bar
Following steps will help you to create a striped progress bar:
Make a <div> and assign a class of .progress and .progress-striped.
Then within the above <div>, insert an empty <div> with .progress class and progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger.
To show the percentage add style attribute with the width. Like in the example style="60%", this indicates that progress has been done 60%.
Let us see an example below:
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% Complete (info)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20%Complete (warning)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Animated Progress Bar
Following steps will help you to create an animated progress bar:
Make a <div> and assign a class of .progress and .progress-striped and also add class .active with .progress-striped.
Then within the above <div>, insert an empty <div> with .progress class.
To show the percentage add style attribute with the width. Like in the example style="60%", this indicates that progress has been done 60%.
This will animate the stripes right to left.
Let us see an example below:
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% Complete</span>
</div>
</div>
Stacked Progress Bar
Place the multiple progress bars into the same .progress to stack them as seen in the following example:
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% Complete</span>
</div>
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% Complete (info)</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20%Complete (warning)</span>
</div>
</div>
Bootstrap Progress Bars
No comments:
Post a Comment