Bootstrap Animated Progress Bar using Bootstrap-progressbar JS

By Hardik Savani June 13, 2023 Category : Bootstrap

In this post i give you example of how to use animated progress bar in bootstrap framework. there are several plugin available for progress bar bootstrap, but bootstrap-progressbar.js plugin is pretty simple to use and easily integrate with bootstrap.

bootstrap-progressbar.js plugin provide several animation progress bar on your page load like basic, themed, striped, animated, aria and animation. In this example i used animated progress bar.

You can also see bootstrap progress bar preview, demo and example code as bellow:

Preview:

Example:

<!DOCTYPE html>

<html lang="en-US" >


<title>Bootstrap progress bar animate example</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-progressbar/0.9.0/bootstrap-progressbar.min.js"></script>


<body>


<div class="container">


<h2 class="text-center">Bootstrap progress bar animate example</h2>


<div class="progress progress-striped active">

<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal="25"></div>

</div>

<div class="progress progress-striped active">

<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="45"></div>

</div>

<div class="progress progress-striped active">

<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="65"></div>

</div>

<div class="progress progress-striped active">

<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="85"></div>

</div>

<div class="progress progress-striped active">

<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>

</div>


</div>


<script type="text/javascript">

$(document).ready(function() {

$('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});

});

</script>


</body>

</html>

you get more information about bootstrap-progressbar plugin from here : Click Here.

Shares