Home Bootstrap How to progress bar animate using bootstrap-progressbar.js?

How to progress bar animate using bootstrap-progressbar.js?

by Shahriar Sagor

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.

<!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>


<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 class="progress progress-striped active">
	  <div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal="45"></div>
	<div class="progress progress-striped active">
	  <div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal="65"></div>
	<div class="progress progress-striped active">
	  <div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal="85"></div>
	<div class="progress progress-striped active">
	  <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="100"></div>


<script type="text/javascript">
	$(document).ready(function() {
	  $('.progress .progress-bar').progressbar({display_text: 'fill', use_percentage: false});


Read Also : Laravel 8 Mobile Number Verification Tutorial

Thanks for read. I hope it help you. For more you can follow us on facebook


You may also like