GrassHopperPebbles.com Demos

JQuery Plugins

imProgressBar 0.5 - Insert After

In this example, I've set up the imProgessBar with a display option of inline and after. This will insert the progress bar container after a named element

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': 'imProgBarCntnr', 'bar_back_class' : 'imBarBack', 'bar_class': 'imProgBar'},
	display: {'type': 'inline', 'insert_type': 'after', 'element': '.googControls'},
	animate_duration: 1500
});

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.

Refresh the page to view the progress bar in action.

Tags

, , , , , , ,