Project Description
jProgressBar is a jQuery plugin that provides a simple percent progress bar. It is written in JavaScript.

Sample

example.JPG

Or you can see a "live" sample of jProgressBar in action by clicking here http://donavon.com/jProgressBarSample/

Using jProgressBar

Using jProgressBar is easy. Simply setup a get a jQuery object then call jProgressBar. In the example below, any HTML elements with a class of percentBar will be turned onto jQuery jProgressBar objects and initialized to a 10 percent full bar.

var bar = $(".percentBar").jProgressBar(10); 

Later, if you would like to change the percentage, you can call the method setPercent on any jProgressBar object. For example, the jProgressBar objects created above will now display a 50 percent full bar.

bar.setPercent(50); 

You can also pass an optional second argument during the creation of your jProgressBar to specify settings. For example, let's say you wanted your bar to be 125px wide. You could do something like this:

var bar = $(".percentBar").jProgressBar(0, {width:125, height:50}); 

Settings

Here is a list of all of the jProgressBar settings and their default values:
  • width width of the jProgressBar (default=100)
  • height height of the jProgressBar (default=12)
  • orientation 0=horizontal, 1=vertical (default=0)
  • border.width width of the border (default=1)

Style

The style of the jProgressBar is controlled through CSS. You can set border, background and bar sub selectors. Here is the CSS that I used on the top jProgressBar in my sample above. The border is set to a solid color of black, the background (the space not occupied by the bar) is set to white and the bar itself is made up of an image.

.jProgressBar_Green .border {
    background-color: #000000;
}
.jProgressBar_Green .border .background {
    background-color: #ffffff;
}
.jProgressBar_Green .border .background .bar {
    background: #6dd436 url(images/jProgressBarBackground.png) right top;
} 

Last edited Sep 4, 2009 at 6:38 PM by donavon, version 8