Post
Ask Question

Dynamic Progress Bar Using Bootstrap And jQuery

Introduction 

 
Progress bar is used to view someone's progress report. We can get a report of how much someone has progressed with his/her work. We can use it during page loading to calculate the percentage of the page loaded. We can use it to get someone's work status report.
 

Static progress bar demo

 
For creating a default static progress bar, we need the following elements.
  1. <div class="progress">  
  2.    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">  
  3.      <span class="sr-only">40% Complete</span>  
  4.    </div>  
  5.  </div>   
aria-valuenow- This is known as curent progress bar value.
aria-valuemin- This is known as initial value of the progress bar value. 
aria-valuemax- This is known as maximum value of the progress bar value. 
 

Types 

 
The following types of progress bars are available.
  • Basic progress bar - This is known as a default progress bar in bootstrap. It is the same as the above demo.
  • Progress bar with a label - We will remove the sr-only class from the progress bar for viewing the progress value.
  • Colored progress bar - For a colorful progress bar, we need it. There are some by-default classes for colors, like success, info, danger etc. If we want to add customized color, then we will add that color through the style tag or we will create a class for color.
  • Striped progress bar - We just need to add '.progress-bar-striped' class to get a striped design progress bar.
  • Animated progress bar - We just need to add 'active' class to get an animated design progress bar.
  • Stacked progress bar - It shows multiple bars into the same.
Example
 
Here, we will take an example of dynamic animated progress bar.
  1. <html lang="en">    
  2. <head>    
  3.   <title>Bootstrap Example</title>    
  4.   <meta charset="utf-8">    
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">    
  6.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>    
  9.   <script type="text/javascript">    
  10.   $(document).ready(function(){    
  11.    var progressBarVal=80;    
  12.    var html="<div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow="+progressBarVal+" aria-valuemin='0' aria-valuemax='100' style='width:"+progressBarVal+"%'>"+progressBarVal+"%</div>";    
  13.    $(".progress").append(html);    
  14.   });    
  15.   </script>    
  16. </head>    
  17. <body>    
  18.     
  19. <div class="container">    
  20.  <h1>The below progress bar is showing that the progress value is 80% </h1>    
  21.   <div class="progress">    
  22.        
  23.   </div>    
  24. </div>    
  25.     
  26. </body>    
  27. </html>    
The above dynamic progress bar is showing that the value of the progress bar is 80%.
 

Summary

 
In this blog and code example, I discussed the type of bootstrap progress bar and how we can use it dynamically.