Search within TutorialsPark

jQuery UI : Progress Bar


Learn how to use jQuery UI to create Progress Bars


jQuery UI : Progress Bar

The jQuery UI allows you to create a progress bar widget, a progress bar is used to show user the completion of a task.

Progress Bar is made to display only determinate tasks, where an accurate status is shown using percentages.

In the Demo, we call a create progress bar selecting a div element and then calling the progressbar method on it.

Example: jQuery UI - Progress Bar

Give it a TRY! » Note: For a progress bar to be displayed correctly, the div element should be empty.


Table : jQuery UI Progress Bar Settings

Settings Description
disabled If set to true, the progress bar is disabled. The default value is false.
value To set the value of the progress bar. Default Value is zero.

jQuery UI : Applying Progress Bar Methods

jQuery UI progress Bar Widget provides a number of methods, which can be used to control the progress Bar.

Table : jQuery UI Progress Bar Settings

Settings Description
progressbar("destroy") To destroy progress bar and return div element to original state.
progressbar("disable") To disable the progress bar.
progressbar("enable") To enable the progress bar.
progressbar("option") To set one or multiple option to configure the progress bar.
progressbar("value", "value") To get or set the value of the progress bar.

Other than the value method all other methods have been demonstrated in button Method.

In the demo, we use a click method to increment or decrement the value of the progress bar by specified percentage points on every click

Example: jQuery UI - Progress Bar Value Method

Give it a TRY! » Note:Press the button to increase or decrease the value of the progress bar by 5%


jQuery UI: Animate the progress bar

The jQuery UI progress bar widget is pretty much basic and at times you may need a different progress bar for your document.

You can use your custom image as the progress bar by using the class ui-progressbar-value and ui-progressbar and a GIF image as a value.

Example: jQuery UI - Animate the Progress Bar

Give it a TRY! » Note: The CSS background-image property is used to specify an animated .GIF Image.


jQuery UI : Progress Bar with Indeterminate Values

Until now, we have seen progress bar with definite values , but there may be instances where a definite value is not possible.For those conditions an Indeterminate option is available

To denote an Indeterminate value , we set attribute value to false, which tells the progress bar to assume 100% as the value.

Example: jQuery UI Progress Bar with Indeterminate Values

Give it a TRY! » Note: Setting the value automatically to 100% denotes that we are making progress.