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:

Read Also: Bootstrap Star Rating using Bootstrap-star-rating JS 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.

Tags :
Previous

How to Get Current URL in Codeigniter?
Next

Laravel Line Chart using Google Charts API Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares