Create Bootstrap progress bar: 6 demos
The progress bar component in web pages
You may need progress bars in web pages for different reasons, for example, showing the progress of uploading a file and letting the user know by way of progress bar that shows the percentage of the file being uploaded.
Similarly, downloading a file, showing the progress of a long task that may involve saving the information in different databases on different servers etc.
In this tutorial, the Bootstrap based progress bars are created that you may integrate into your web pages quite easily. Functionality wise, it is up to you how to handle it.
A demo of progress bar Bootstrap with label
The bootstrap has a few built-in classes for creating the progress bars. You simply need to use the progress class in the main div containing progress bar. In the inner div, use the progress-bar class where you may specify different attributes including the label that shows the current progress value. Have a look:
See online demo and code
The simple markup used for creating the progress bar using Bootstrap classes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="container"> <h3>A demo of progress bar using Bootstrap</h3> <div class="row"> <div class="col-md-4"> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> 45% </div> </div> </div> </div> </div> |
See the live demo and get complete code from the demo page. I used progress-bar-danger class for showing the red color for the progress.
Using warning color in progress bar demo
In this demo, the progress-bar-warning class is used for creating the “yellowish” color bar. Basically, this is just like the button or alert classes used for different colors, have a look:
See online demo and code
The markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="container"> <h3>A demo of progress bar using Bootstrap</h3> <div class="row"> <div class="col-md-4"> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"> 65% </div> </div> </div> </div> </div> |
Similarly, you may use the progress-bar-info for light blue color, progress-bar-success for the green etc. The default is primary color i.e. blue.
A demo of creating stripped progress bar
In this demo, a striped progress bar is created by using the built-in progress-bar-striped class along with progress-bar and progress-bar-info classes.
See online demo and code
The markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="container"> <h3>A demo of striped progress bar</h3> <div class="row"> <div class="col-md-4"> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%"> 70% done </div> </div> </div> </div> </div> |
The striped bar style is accomplished by using the gradient.
A demo of animated and striped progress bar
By adding the .active class in above demo of striped progress bar, you may create an animated progress bar as shown in the demo below:
See online demo and code
The code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="container"> <h3>A demo of animated progress bar</h3> <div class="row"> <div class="col-md-4"> <div class="progress"> <div class="progress-bar progress-bar-primary progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%"> 70% done </div> </div> </div> </div> </div> |
You can see, the animation from right to left in the progress bar.
A demo of multi-colored progress bar
By using multiple progress bars within the main div containing progress class, you may create multi-color progress bar by using Bootstrap. Have a look at the following demo where I used info, danger and success colors for creating a progress bar with simple and striped style by using the active class:
See online demo and code
The code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="container"> <h3>A demo of multi-color progress bar</h3> <div class="row"> <div class="col-md-4"> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 20%"> 20% </div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 30%"> 30% Complete </div> <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%"> 40% </div> </div> </div> </div> </div> |
A demo of progress bar with box-shadow
In this demo, the box-shadow property of CSS is used for the container of the progress bar. Apart from that, a few built-in properties of Bootstrap are overridden for the customization of the progress bar. For example, the properties of progress class are changed along with the active class. The animation property of CSS is also used for showing the progress in three seconds duration.
Have a look and get the complete code from the demo page:
See online demo and code
The CSS used in example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.prog-container{ background: #DDEEEE; border-radius: 40px; padding: 23px; margin: 10px 0; box-shadow: 0 0 5px #8CB4D7; } .progress{ height: 30px; margin: 0; overflow: visible; border-radius: 50px; background: #eaedf3; box-shadow: inset 0 10px 10px rgba(220, 223, 239,0.6); } .progress .progress-bar{ border-radius: 10px; } .progress .current-prog-val{ position: relative; left: -65px; top: 4px; font-size: 16px; color: #FF8040; font-weight:800; } .progress-bar.active{ animation: reverse progress-bar-stripes 0.40s ease-in, animate-positive 3s; } @-webkit-keyframes animate-positive{ 0% { width: 0%; } } @keyframes animate-positive { 0% { width: 0%; } } |
The markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="prog-container"> <div class="progress"> <div class="progress-bar progress-bar-primary progress-bar-striped active" style="width:60%; box-shadow:-1px 10px 10px rgba(91, 192, 222, 0.7);"></div> <div class="current-prog-val">60%</div> </div> </div> </div> </div> </div> |
Have a look at the live demo by clicking the above links.