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

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:

• 10 Best Progress Bar (Linear) Components In JavaScript & CSS
• 10 Best Circular/Radial Progress Bar JavaScript Plugins
• 10 Best Progress Bar Components For Vue.js App
• 10 Best JavaScript & CSS Progress Bar Components

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.