How to animate a Progress Bar in Bootstrap ?

10 Aug, 2021
The Bootstrap Progress Bar is a component of the bootstrap framework used to display the progress of a process. We can customize the bootstrap progress bar, color, shape, and animation as per the requirements. Bootstrap also provides several types of progress bars.
Using Progress Bar, users can easily know the status of work done for a particular process. For example, if a user is downloading a file, the progress bar can be used to show the progress of the ongoing download, the same is the case for uploading and etc.
Step By Step Guide to Animate Progress Bar
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
 
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”><script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script><script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
Step 2: Add a HTML <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped. Inside the <div> add an empty <div> with a class of .progress-bar and .progress-bar-success. Using CSS attribute specify the width for progress bar. 
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success"
        style="width:0%">
    </div>
</div>
Step 3: Add jQuery in <script> tag to animate progress bar to show progress.
$(".progress-bar").animate({
    width: "70%"
}, 2500);
Example:
HTML
<!DOCTYPE html><html>  <head>    <title>Bootstrap Progress Bar Animation Example</title>      <!--Include Latest compiled and minified CSS -->    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"         rel="stylesheet" />    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">    </script></head>  <body>    <br><br>      <!--Include bootstrap progress bar in div.         Also specify width as 0% using CSS -->    <div class="progress progress-striped active">        <div class="progress-bar progress-bar-success"            style="width: 0%">        </div>    </div>      <script>          // Set the width to animate the progress bar        // Along with time duration in milliseconds        $(".progress-bar").animate({                width: "70%",        }, 2500);    </script></body>  </html>
Output:
Bootstrap-4
Bootstrap-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property