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