Post
Ask Question

Bootstrap For Beginners - Part Nine ( Bootstrap Progress Bars )

Introduction

In this article we will learn about Bootstrap Progress Bar component. In this article we will create Progress Bars with different styles using Bootstrap classes.

Bootstrap Progress Bar
 
Progress bars can be used to show the progress of a task or action to the users.

Now we will create different types of progress bars and see how it is useful for webpages.
 
Basic Progress Bar
 
We can create a default progress bar,by adding .progress class to a <div> element.
 
Example 1 : Creating Default Progress Bar
 
In this example to create a basic progress bar we will add a <div> with class .progress inside the container,now inside this <div>
we will add one more <div> with class .progress-bar, we will also add width in style attribute that indicate progress of task or action.
 
We will add .sr-only class for Progress Bar
  • .sr-only : It is used to hides an element to all devices except screen readers
We will add following properties for Progress Bar,
  • aria-valuenow : It is used to defines the current value for a range for Progress Bar
  • aria-valuemin :It is used to defines the minimum allowed value for a range
  • aria-valuemax :It is used to defines the maximum allowed value for a range
Lets create an example for Default Progress Bar by writing following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part9</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Basic Bootstrap Progress Bar (30% Complete)</h3>  
  13.         <!-- A <div> element with class .progress -->  
  14.         <div class="progress">  
  15.             <!-- A <div> element with class .progress-bar -->  
  16.             <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">  
  17.                 <span class="sr-only">30% Complete Process</span>  
  18.             </div>  
  19.         </div>  
  20.     </div>  
  21.     <script src="js/jquery-2.1.4.min.js"></script>  
  22.     <script src="js/bootstrap.min.js"></script>  
  23. </body>  
  24. </html>   
Output:
 
  
 
Progress Bar With Label
 
To show a visible progress status as a persentage we just remove the <span></span> with .sr-only class from the progress bar.
 
Example 2 : Progress Bar With Label
 
In this example we will create Progress Bar same like Example1 in this we want to show visible progress status so we will remove the <span> with .sr-only class from the progress bar.we will create Progress Bar With Label by writing following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part9</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Progress Bar With Label</h3>  
  13.         <!-- A <div> element with class .progress -->  
  14.         <div class="progress">  
  15.             <!-- A <div> element with class .progress-bar -->  
  16.             <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">  
  17.                 30%  
  18.             </div>  
  19.         </div>  
  20.     </div>  
  21.     <script src="js/jquery-2.1.4.min.js"></script>  
  22.     <script src="js/bootstrap.min.js"></script>  
  23. </body>  
  24. </html>  
Output:
 
 
 
Colored Progress Bars with Contextual classes
 
Bootstrap provide Contextual classes for Progress Bar that is used to provide meaning through colors.
 
The contextual classes used with progress bars 
  • .progress-bar-info
  • .progress-bar-success
  • .progress-bar-danger
  • .progress-bar-warning
Example 3 : Creating Progress Bars with Contextual classes
 
In this example to create Colored Progress Bars we will add <div> with class .progress inside the container, now inside this <div> we will add one more <div> with class .progress-bar and we will add Contextual classes here like .progress-bar-info,.progress-bar-success,.progress-bar-danger,.progress-bar-warning.we will also add width in style attribute that indicate progress of task or action.we will also add aria attributes for progress bar,by writing following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part9</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Colored Progress Bars with Contextual classes</h3>  
  13.         <div class="progress">  
  14.             <!-- A <div> element with class .progress-bar  and .progress-bar-info -->  
  15.             <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0"   
  16.                 aria-valuemax="100" style="width:30%">  
  17.                 30% Complete Process (Info)  
  18.             </div>  
  19.         </div>  
  20.         <div class="progress">  
  21.             <!-- A <div> element with class .progress-bar  and .progress-bar-success -->  
  22.             <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0"  
  23.                 aria-valuemax="100" style="width:50%">  
  24.                 50% Complete Process (Success)  
  25.             </div>  
  26.         </div>  
  27.         <div class="progress">  
  28.             <!-- A <div> element with class .progress-bar  and .progress-bar-danger -->  
  29.             <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0"  
  30.                 aria-valuemax="100" style="width:70%">  
  31.                 70% Complete Process (Danger)  
  32.             </div>  
  33.         </div>  
  34.         <div class="progress">  
  35.             <!-- A <div> element with class .progress-bar  and .progress-bar-warning -->  
  36.             <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90" aria-valuemin="0"   
  37.                 aria-valuemax="100" style="width:90%">  
  38.                 90% Complete Process (Warning)  
  39.             </div>  
  40.         </div>  
  41.     </div>  
  42.     <script src="js/jquery-2.1.4.min.js"></script>  
  43.     <script src="js/bootstrap.min.js"></script>  
  44. </body>  
  45. </html>  
Output:
 
 
 
Striped Progress Bars
 
To create the stripped progress bar we add class .progress-bar-striped to the .progress-bar class.
 
Example 4 : Striped Progress Bars
 
In this example we will create a basic Striped Progress Bar and also create colored Striped Progress Bars using contextual classes. by using following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part9</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Striped Progress Bar Basic</h3>  
  13.         <div class="progress">  
  14.             <!-- A <div> element with class .progress-bar-striped -->  
  15.             <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="30" aria-valuemin="0"  
  16.                  aria-valuemax="100" style="width:30%">  
  17.                 <span class="sr-only">30%</span>  
  18.             </div>  
  19.         </div>  
  20.         <br />  
  21.         <h3>Colored Striped Progress Bars with Contextual classes.</h3>  
  22.         <div class="progress">  
  23.             <!-- A <div> element with class .progress-bar-striped  and .progress-bar-info -->  
  24.             <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="30" aria-valuemin="0"   
  25.                 aria-valuemax="100" style="width:30%">  
  26.                 30% Complete Process (Info)  
  27.             </div>  
  28.         </div>  
  29.         <div class="progress">  
  30.             <!-- A <div> element with class .progress-bar-striped  and .progress-bar-success -->  
  31.             <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0"  
  32.                 aria-valuemax="100" style="width:50%">  
  33.                 50% Complete Process (Success)  
  34.             </div>  
  35.         </div>  
  36.         <div class="progress">  
  37.             <!-- A <div> element with class .progress-bar-striped  and .progress-bar-danger -->  
  38.             <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0"  
  39.                 aria-valuemax="100" style="width:70%">  
  40.                 70% Complete Process (Danger)  
  41.             </div>  
  42.         </div>  
  43.         <div class="progress">  
  44.             <!-- A <div> element with class .progress-bar-striped  and .progress-bar-warning -->  
  45.             <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="90" aria-valuemin="0"   
  46.                 aria-valuemax="100" style="width:90%">  
  47.                 90% Complete Process (Warning)  
  48.             </div>  
  49.         </div>  
  50.     </div>  
  51.     <script src="js/jquery-2.1.4.min.js"></script>  
  52.     <script src="js/bootstrap.min.js"></script>  
  53. </body>  
  54. </html>  
Output:
 
 
Animated Progress Bar
 
We can create the animated progress bar just adding .active class to .progress-stripped, .active class used to animates the stripes from right to left of Progress Bar.
 
Example 5 : Animated Progress Bar
 
In this example we will create Animated Progress Bar by writing following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part9</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Animated Progress Bar</h3>  
  13.         <div class="progress">  
  14.             <!-- A <div> element with class .progress-bar-striped and active -->  
  15.             <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0"   
  16.                 aria-valuemax="100" style="width:50%">  
  17.                 50%  
  18.             </div>  
  19.         </div>  
  20.         <div class="progress">  
  21.             <!-- A <div> element with class .progress-bar-striped and active with .progress-bar-success -->  
  22.             <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0"  
  23.                 aria-valuemax="100" style="width:70%">  
  24.                 70% Complete Process (Success)  
  25.             </div>  
  26.         </div>  
  27.     </div>  
  28.     <script src="js/jquery-2.1.4.min.js"></script>  
  29.     <script src="js/bootstrap.min.js"></script>  
  30. </body>  
  31. </html>  
Output:
 
 
Stacked Progress Bars
 
We can create Stacked Progress Bar by placing multiple bars into the same <div class="progress">.
 
Example 6 : Stacked Progress Bars
 
In this example we will place multiple progress bars into the same .progress to stack them, in this we will stack one progress bar into three stacks it is used like an password meter it shows strength of password as Weak,Good and Strong it is useful in Forms or Webpages, see output by writing following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part9</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Stacked Progress Bar</h3>  
  13.         <p>Example:<i>Password Meter</i></p>  
  14.         <div class="progress">  
  15.             <div class="progress-bar progress-bar-danger" role="progressbar" style="width:10%">  
  16.                 Weak  
  17.             </div>  
  18.             <div class="progress-bar progress-bar-warning" role="progressbar" style="width:20%">  
  19.                 Good  
  20.             </div>  
  21.             <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">  
  22.                 Strong  
  23.             </div>  
  24.         </div>  
  25.     </div>  
  26.     <script src="js/jquery-2.1.4.min.js"></script>  
  27.     <script src="js/bootstrap.min.js"></script>  
  28. </body>  
  29. </html>  
Output:
 
 
 
In this article we focused on Bootstrap Progress Bars.Then in next articles we will understand all the components of Bootstrap step by step.
 
Read more articles on Bootstrap:


Similar Articles