Animated Jquery Progress Bar Plugin | ProgressBar

progress-bar-plugin

ProgressBar is a compact, customizable, and animated jQuery extension for a progress bar that seamlessly fills the horizontal bar based on the percentage you select.

The best part about the plugin is that it only plays the smooth fill animation when the progress bar is scrolled through the view.

How to make use of it:

1. Download and Include progress-bar.css & progress-bar.js after together with the jQuery library.

<link rel="stylesheet" href="progress-bar.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="progress-bar.js"></script>

2. Code the HTML for the progress bar. Available HTML data attributes:

<div class="progress-bar">
  <div class="progress" 
       data-percent="60" 
       data-color="green">
       <span>60%</span>
  </div>
</div>

3. Initialize the plugin and completed it.

$(document).ready(function(){
  $(".progress-bar").ProgressBar();
});

Easy Animated Progress Bar, ProgressBar Plugin/Github


See Demo And Download

Official Website(nayem1145): Click Here

This superior jQuery/javascript plugin is developed by nayem1145. For extra Advanced usage, please go to the official website.