Bootstrap Progress Bars
This chapter will explain Bootstrap progress bars. In this tutorial, you will see how to use Bootstrap to create progress bars for loading, redirecting, or action states.
Bootstrap progress bars use CSS3 transitions and animations to achieve this effect. Internet Explorer 9 and earlier versions and old versions of Firefox do not support this feature; Opera 12 does not support animation.
Default Progress Bar
Follow these steps to create a basic progress bar:
- Add a <div> with class.progressthe <div>.
- Next, inside the above <div>, add a <div> with class.progress-barthe empty <div>.
- Add a style attribute with a width expressed as a percentage, for example style="60%"; indicates the progress bar is at 60% position.
Let's look at the following example:.sr-onlyThe class can hide text content:
Example
<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>
Try it yourself »
The result is shown below:
You can also set text content in the 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>
Try it yourself »
The result is shown below:
Alternative Progress Bars
Follow these steps to create progress bars with different styles:
- Add a <div> with class.progressthe <div>.
- Next, inside the above <div>, add a <div> with class.progress-barand classprogress-bar-*the empty <div>. Where * can besuccess、info、warning、danger。
- Add a style attribute with a width expressed as a percentage, for example style="60%"; indicates the progress bar is at 60% position.
Let's look at the following example:
Example
<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 (success)</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>
Try it yourself »
The result is shown below:
Display progress bar text content:
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% Complete (success)
</div>
</div>
<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>
<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% Complete (warning)
</div>
</div>
<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% Complete (danger)
</div>
</div>
Try it yourself »
The result is shown below:
Striped Progress Bars
Follow these steps to create a striped progress bar:
- Add a <div> with class.progressand.progress-stripedthe <div>.
- Next, inside the above <div>, add a <div> with class.progress-barand classprogress-bar-*the empty <div>. Where * can besuccess、info、warning、danger。
- Add a style attribute with a width expressed as a percentage, for example style="60%"; indicates the progress bar is at 60% position.
Let's look at the following example:
Example
<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 (success)</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>
Try it yourself »
The result is shown below:
Animated Progress Bars
Follow these steps to create an animated progress bar:
- Add a <div> with class.progressand.progress-stripedthe <div>. Also add class.active。
- Next, inside the above <div>, add a <div> with class.progress-barthe empty <div>.
- Add a style attribute with a width expressed as a percentage, for example style="60%"; indicates the progress bar is at 60% position.
This will give the stripes a right-to-left motion effect.
Let's look at the example below:
Example
<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>
Try it Yourself »
The result is as follows:
Stacked Progress Bars
You can even stack multiple progress bars. Put multiple progress bars in the same.progressto achieve stacking, as shown in the example below:
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" 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>
Try it Yourself »
The result is as follows:
Progress Bar Sizes
We can set the size of the progress bar through the height attribute:
Example
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Try it Yourself »
The result is as follows:
