jQuery UI progressbar documentation

## Progressbar Widgetversion added: 1.6

Description: Display status of a determinate process.

## Options

### disabledType: Boolean

Default: `false`
Disables the progressbar if set to `true`.
Code examples:

Initialize the progressbar with the disabled option specified:

`$(` `".selector"` `).progressbar({ disabled:` `true` `});`

Get or set the disabled option, after initialization:

`// getter` `var` `disabled = $(` `".selector"` `).progressbar(` `"option"``,` `"disabled"` `);` `// setter` `$(` `".selector"` `).progressbar(` `"option"``,` `"disabled"``,` `true` `);`

### valueType: Number

Default: `0`
The value of the progressbar.

## Methods

### destroy()

Removes the progressbar functionality completely. This will return the element back to its pre-init state.

- This method does not accept any arguments.

### disable()

Disables the progressbar.

- This method does not accept any arguments.

### enable()

Enables the progressbar.

- This method does not accept any arguments.

### option( optionName ) Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

### option() Returns: PlainObject

Gets an object containing key/value pairs representing the current progressbar options hash.

- This method does not accept any arguments.

### option( optionName, value )

Sets the value of the progressbar option associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to set.
- value
  Type: Object
  A value to set for the option.

### option( options )

Sets one or more options for the progressbar.

- options
  Type: Object
  A map of option-value pairs to set.

### value() Returns: Number

Gets the current value of the progressbar.

- This method does not accept any arguments.

### value( value )

Sets the current value of the progressbar.

- value
  Type: Number
  The value to set.

### widget() Returns: jQuery

Returns a `jQuery` object containing the progressbar.

- This method does not accept any arguments.

## Events

### change( event, ui )

Triggered when the value of the progressbar changes.

- event
  Type: Event
- ui
  Type: Object

### complete( event, ui )

Triggered when the value of the progressbar reaches the maximum value.

- event
  Type: Event
- ui
  Type: Object

### create( event, ui )

Triggered when the progressbar is created.

- event
  Type: Event
- ui
  Type: Object

The progress bar is designed to display the current percent complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside its parent container by default.

This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process — if the actual status cannot be calculated, an indeterminate progress bar or spinner animation is a better way to provide user feedback.

### Additional Notes:

- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

## Example:

#### A simple jQuery UI Progressbar

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | `<!doctype html>` `<``html` `lang``=``"en"``>` `<``head``>` `` `<``meta` `charset``=``"utf-8"``>` `` `<``title``>progressbar demo</``title``>` `` `<``link` `rel``=``"stylesheet"` `href``=``"http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"``>` `` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.2.js"``></``script``>` `` `<``script` `src``=``"http://code.jquery.com/ui/1.9.1/jquery-ui.js"``></``script``>` `</``head``>` `<``body``>` `<``div` `id``=``"progressbar"``></``div``>` `<``script``>` `$( "#progressbar" ).progressbar({` `` `value: 37` `});` `</``script``>` `</``body``>` `</``html``>`

#### Demo: