Progress Bar jQuery plugin

February 13, 2014

I developed this Animated Progress Bar jQuery plugin to simplify adding an animated bar graph on a website.

Some example scenarios where a tool like this is useful:

  • Signatures collected
  • Funds / Donations raised
  • Skill level for designer/developer infographics

To use, just fill in the required input and the plugin calculates the progress of your goal and animates the bar. You can specify text to put before and after the amount raised.

With all the right moves, this plugin can be integrated into a content management system-powered website. If you like this and want to use it on your CMS-powered site, feel free to contact me about developing a WordPress or ProcessWire version of this plugin.

Progress bar screenshot

You are welcome to download the plugin and use it in your personal projects provided that you leave the credits in the source code.

Adding this plugin to your website using jQuery is as easy as copying and pasting the following code:

$(document).ready(function() {
    $('#sample_goal').goalProgress({
        goalAmount: 150,
        currentAmount: 100,
        textBefore: '',
        textAfter: ' raised'
    });
});

You can download the jQuery plugin from Github and see the live demo here.

This plugin can also easily be added to any Angular application by injecting it into your application’s module and adding this small snippet of code:

<div goal-progress current="100" goal="150" before="$" after=" raised!"></div>

For support with AngularJS, see this repository.