How to animate a Progress Bar in Bootstrap ?

Last Updated : 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:

How to create animated progress bar using react-bootstrap ?

vrushaket

Improve

Article Tags :

How to animate a Progress Bar in Bootstrap ?

Similar Reads

Thank You!

What kind of Experience do you want to share?