Bootstrap is the CSS technology developed by Twitter. It comes with predefined styles that are used straightly to make our webpage nice look and feel.
Bootstrap contains a bunch of CSS code which is usable at any place.
Introduction
Please read
Bootstrap Introduction if you are new to Bootstrap.
In some situations, it is necessary to show the user about the process of executions. This can be achieved by using Progress Bars. Bootstrap has some predefined progress bar styles which can be used to create nice progress bars easily.
Background
The main objective of this article is to learn creating different types of Progress Bars using bootsrap.css.
Using Bootstrap code
We have progress and progress-bar classes in bootstrap.css to create a progress bar.
Normal Progress-Bar:
See the below example of creating simple progress bar,
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 70%;">
Please wait...
</div>
</div>This will shows a progress bar in your browser
Striped Progress-Bar:
Add progress-striped to the above normal progress bar code like below,
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 70%;">
Please wait...
</div>
</div>Run this code to see a striped progress bar as following
Animated Striped Progress-Bar:
If you want an active progress bar in which stripes are moving linearly, Add active to the above striped progress bar.
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width: 70%;">
Please wait...
</div>
</div>This gives you a running progress bar
you will see the running stripes in your browser.
Different colors of Normal Progress-Bars:
In Bootstrap, we have some predefined colors of progress bars,
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 20%">
Processing..20%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 40%">
Processing..40%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 60%">
Processing..60%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 80%">
Processing..80%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 100%">
Done..100%
</div>
</div>Observe the above code in which we used five progress colors of danger, warning, info, default and success.
Run this code and see the following output in your browser,
Different colors of Striped Progress-Bars:
As in the same above code, Just add progress-striped to get the striped bars
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 20%">
Processing...20%
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width: 40%">
Processing...40%
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 60%">
Processing...60%
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar" style="width: 80%">
Processing...80%
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width: 100%">
Done...100%
</div>
</div>If you run this code, you will see the striped progress bars in your browser,
Creating Itunes Progress-Bar
We can also create a progress bar which we see in Apple Itunes.
Observe the below simple code snippet of doing that,
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 20%">
Videos
</div>
<div class="progress-bar progress-bar-info" style="width: 40%">
Music
</div>
<div class="progress-bar progress-bar-warning" style="width: 15%">
Apps
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
Photos
</div>
<div class="text-center">Free Space</div>
</div>In the above code, we are placing different progress-bars in a single progress which gives the following result
Conclusion
In this article, we have seen different types of Progress-Bars using Twitter Bootstrap. Hope you understand. If you have any doubts in this topic, please ask below.
Thanks for reading.
Regards,
Krishna.