Animated Jquery Progress Bar Plugin – ProgressBar

ProgressBar is an easy-to-use, customizable, and animated progress bar jQuery plugin that smoothly calculates the horizontal percentage based on your input. It has various types of predefined color options that can be used easily.

Features:

• Super customizable and easy to use.
• Animation is only triggered when the progress bar is scrolled into view.
• It has various types of color options.
• Supports smooth animation.

How to use it:

1. Include the Javascript progress-bar.js at the bottom of the web page.

<script src="js/progress-bar.js"></script>

2. Include the CSS progress-bar.css in the header of the page.

<link rel="stylesheet" href="css/progress-bar.css">

3. Add the basic HTML to the page.

<div class="progress-bar">
    <div class="progress" data-percent="30" data-color="blue">
        <span>30%</span>
    </div>
</div>

4. Initialize the plugin and we’re ready to go.

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