Feb 17, 2010

jQuery Progress Bar Configuration

Author: gaweee | Filed under:

The uncompressed jQuery Progress bar code contains the following override-able defaults:

{
	steps			: 20,
	stepDuration		: 20,
	max			: 100,
	showText		: true,
	textFormat		: 'percentage',
	width			: 120,
	height			: 12,
	callback		: null,
	boxImage		: 'images/progressbar.gif',
	barImage		: {
		0:  'images/progressbg_red.gif',
		30: 'images/progressbg_orange.gif',
		70: 'images/progressbg_green.gif'
	},
};

Lets explain each configuration option:

Option Description Default Value Possible Values
steps Number of steps taken for the progress bar to go from empty to full 20 Any positive integer
stepDuration The duration between each call in milliseconds. A small number creates a smoother animation but increases CPU load
17th Feb 2010: Renamed from step_duration. If stepDuration doesnt work for you, try step_duration		 20 Any positive integer
max Maximum value. This could represent the fraction denominator. 100 Any Positive integer
showText Determines if the progress status text should be shown beside the progress bar true Boolean
textFormat Determines if the rendered text is a percentage or fraction form percentage ‘percentage’ or ‘fraction’
width Width of the progress bar image 120 Any positive integer
height Height of the progress bar image 12 Any positive integer
callback Callback function initiated after each progress render. null Anonymous function
boxImage Box/border image of the progress bar images/progressbar.gif URL path to the progress bar image
barImage Colored progress bar background image. When a set of images and key value points are used, the progress bar will swap out the image when the key value point has been achieved. This allows progress bars which colors morph according to its value. 
{
	0:  'images/progressbg_red.gif',
	30: 'images/progressbg_orange.gif',
	70: 'images/progressbg_green.gif'
}
 Object with sets of URL path to images for a particular key value points (integer only). Alternatively, use a single URL for all values
 
read users' comments (0)