Logo
Welcome Smartik
Profile Logout
Progress bar
Slider Tabs

Progress bar

How to create a Progress Bar?

1. Initialize the plugin

jQuery(function() {
		jQuery( "#progressbar" ).progressbar({
			value: 59
		});
});

2. Attach it to a DIV using the ID "progressbar" (for this example)

<div id="progressbar"></div>

The result of the code above:

Another example (animated)

How to create an animated Progress Bar?

1. Initialize the plugin

jQuery('#progress1').anim_progressbar();

2. Attach it to a DIV using the ID "progress1" (for this example)

<div id="progress1" class="pbar_orange">
	<div class="percent"></div>
	<div class="pbar"></div>
	<div class="elapsed"></div>
</div>

The result of the code above:


class="pbar_orange" - is the class which determine the color of Progress Bar. Posible values: "pbar_blue" "pbar_orange" "pbar_red" "pbar_green" "pbar_black"


Main Options
OPTION TYPE DEFAULT DESCRIPTION
disabled Boolean false Disables (true) or enables (false) the progressbar. Can be set when initialising (first creating) the progressbar.
value Number 0 The value of the progressbar.
anim_progressbar() Function - The function to create an animated Progress bar
start Option, Date new Date() For animated progress bar. Time to start
finish Option, Date new Date().setTime(new Date().getTime() + 60 * iCms) For animated progress bar. Time to finish. By default is from now + 60 sec.
interval Number 100 The interval in miliseconds. (100 = 0.1sec)
OPTION TYPE DEFAULT DESCRIPTION
Reference:
Slider Tabs