Easy Animated Progress Bar In jQuery - progress-bar.js

Easy Animated Progress Bar In jQuery - progress-bar.js
File Size: 15 KB
Views Total: 758
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A tiny, customizable, animated progress bar jQuery plugin that smoothly fills the horizontal bar based on the percentage you specify.

The best part of the plugin is that the smooth fill animation is only triggered when the progress bar is scrolled into view.

See Also:

How to use it:

1. Download and Include progress-bar.css & progress-bar.js after including 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:

  • data-percent: Progress bar percentage
  • data-color: Background color
<div class="progress-bar">
  <div class="progress" 
       data-percent="60" 
       data-color="green">
       <span>60%</span>
  </div>
</div>

3. Initialize the plugin and done.

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

About Author:

Author: Nayem Ahmed

Website: https://github.com/nayem1145/ProgressBar


This awesome jQuery plugin is developed by nayem1145. For more Advanced Usages, please check the demo page or visit the official website.