Today now in this post i will show you How to progress bar animate using bootstrap-progressbar.js? Now in this post i will give you an example of how to use an animated progress bar in bootstrap framework. There are the several plugins are available for progress bar bootstrap. But in bootstrap-progressbar.js plugin is pretty simple to use and very easily integrate with bootstrap.
By using bootstrap-progressbar.js plugin we do because it provide us several animation progress bar on our page load as like basic, themed, striped, animated, aria and animation.
In this example i will used animated progress bar.
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>
Read Also : Laravel 8 Mobile Number Verification Tutorial
Thanks for read. I hope it help you. For more you can follow us on facebook
