Bootstrap

How to Create a Dynamic Progress Bar in Bootstrap

Introduction – Dynamic Progress Bar in Bootstrap

When there is a need to visualize the progress of operation or task such as downloading of a file or data transfer etc then Progress Bar comes in use. The progress bar is used to view the progress report. Progress bars can be used during page loading to calculate the percentage of the page loaded.

A dynamic Progress bar can also be used in showing the progress of a file transfer, the most common use of dynamic progress bars can be seen when we are installing or downloading any piece of content from the Internet. In this article, we are going to learn how can we make a dynamic progress bar using Bootstrap.

How to Create Dynamic Progress Bar in Bootstrap

Before creating a Dynamic Progress Bar, we all must be aware of the types of progress bars available to us. Generally, there are the following types of progress bars:

  1. Basic progress bar – This is the most common and the default progress bar which we get in Bootstrap.
  2. Progress bar with a label – These kinds of progress bars have the label on top of it for viewing the progress value.
  3. Colored progress bar – For a colorful progress bar, there are some by-default classes for colors, like success, info, danger, etc in bootstrap. You can also customize them even more based on your choice of colors.
  4. Striped progress bar – As the name suggests, this is the striped progress bar which can be made in bootstrap using the class ‘.progress-bar-striped’.
  5. Animated progress bar – We just need to add ‘active’ class to get an animated design progress bar.
  6. Stacked progress bar – It shows multiple bars into the same.

Example of Dynamic Progress Bar in Bootstrap

<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var progressBarVal=80;
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>";
$(".progress").append(html);
});
</script>
</head>
<body>

<div class="container">
<h1>The below progress bar is showing that the progress value is 80% </h1>
<div class="progress">

</div>
</div>

</body>
</html>

So this is how you can make a dynamic progress bar in bootstrap. If you like this article, please give it a share. Thanks!

Leave a Comment