GrasshopperPebbles.com Demos: imProgressBar

imProgressBar 0.5 - Inline Prepend

The imProgessBar has 2 display options (inline, and popup).

When setting a display of inline, you must add an insert_type option. The values for insert_type are:

prepend - insert inside parent element before the first element
append - insert inside parent element after the last element
after - insert after a named element - can be either id or class ('#id', '.class')
before - insert before a named element - can be either id or class ('#id', '.class')

$('#mapInfo').imProgressBar({
	progress_bar: {'container': 'progBarCntnr', 'bar_back_class' : 'progBorder', 'bar_class': 'progBar'},
	display: {'type': 'inline', 'insert_type': 'prepend'},
	animate_duration: 1500
});

In this example, I set up the imProgressBar plugin to prepend the progress bar container to th parent element ('#mapInfo').

I also set the animation_duration to 1500 (miliseconds), so that the bar width will increase every 1.5 seconds. The default for this option is 100 (.1 secs).

View the source code for this page to see how to set up the plugin. For documentation on the imProgessBar plugin, see my post: JQuery Plugin: imProgessBar.

GrassHopperPebbles.com Demos

JQuery Plugins

imProgressBar 0.5 - Inline Prepend