ProgressBar : jQuery Image Progress Bar Plugin

jQuery Image Progress Bar

JQuery Image Progress Bar this is provides a jquery plugin for making vertical progress bars out of images. Once the progress bar has been created you can interact with it to set the current percentage as required.

With ProgressBar.js, it’s easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like LineCircle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor.

ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+.


A simple code example of creating a Line shaped progress bar and animating it from 0% to 100%. See the install documentation for different installation options.

var ProgressBar = require('progressbar.js');

// Assuming we have an empty <div id="container"></div> in
var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1);  // Value from 0.0 to 1.0


A few examples of using ProgressBar.js which can be quickly tested in JSFiddle. You can submit your own example suggestions to this issue.

A tiny creative jQuery plugin to create a vertical progress bar that fills the height of a PNG image to represent the current percentage.

How to use it:

1. Include the stylesheet progressbar.css in the head, and the JavaScript jquery.progressbar.js at the bottom of the webpage.

1<link rel="stylesheet" href="/path/to/progressbar.css">
2<script src="/path/to/cdn/jquery.min.js"></script>
3<script src="/path/to/jquery.progressbar.js"></script>

2. Create a placeholder in which the plugin renders the progress bar.

1<div id="example"></div>

3. Call the function on the placeholder element and specify the image path as follows:

1var myProgress = $("#example").progressBar({
2  imageUrl:'image.png',
3  imageHeight: 300,
4  imageWidth: 250

4. You can also use a background image as the progress bar.

1var myProgress = $("#example").progressBar({
2  imageUrl:'image.png',
3  imageHeight: 300,
4  imageWidth: 250,
5  backgroundImageUrl:'bg.png',
6  backgroundOpacity: 1

5. Update the progress bar to a new value.

view source
Example 1.
A single image, when used on the background it has opacity applied to be only partially visible.

var duckbar1 = $("#divDuck1").progressBar({
    imageUrl: 'images/duck.png',
    imageHeight: 290,
    imageWidth: 254

// to update percentage value to 15%
Example 2.
Same as above, but dark background.

var duckbar2 = $("#divDuck2").progressBar({
    imageUrl: 'images/duck.png',
    imageHeight: 290,
    imageWidth: 254
Example 3.
Having no background image (or making it totally transparent)

var duckbar3 = $("#divDuck3").progressBar({
    imageUrl: 'images/duck.png',
    imageHeight: 290,
    imageWidth: 254,
    backgroundOpacity: 0
Example 4.
Two different images; a ‘full’ and an ’empty’, the background (or empty) image having no transparency

var bucketbar = $("#divBucket").progressBar({
    imageUrl: 'images/BucketFull.png',
    backgroundImageUrl: 'images/BucketEmpty.png',
    imageHeight: 146,
    imageWidth: 176,
    backgroundOpacity: 1
Example 5.
NZ loves pies. I also love pies.

var piesBar = $("#divPie").progressBar({
    imageUrl: 'images/nz-pies.png',
    backgroundImageUrl: 'images/nz-empty.png',
    imageHeight: 342,
    imageWidth: 233,
    backgroundOpacity: 1

For More Jquery Plugins Click


Leave a Reply

Your email address will not be published. Required fields are marked *