## Progressbar Widgetversion added: 1.6

Description: Display status of a determinate or indeterminate process.

## QuickNavExamples

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.

A determinate progress bar 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 should be used 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.

## 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` `);`

### maxType: Number

Default: `100`
The maximum value of the progressbar.
Code examples:

Initialize the progressbar with the max option specified:

`$(` `".selector"` `).progressbar({ max: 1024 });`

Get or set the max option, after initialization:

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

### valueType: Number or Boolean

Default: `0`
The value of the progressbar.
Multiple types supported:

- Number: A value between `0` and the `max`.
- Boolean: Value can be set to `false` to create an indeterminate progressbar.

Code examples:

Initialize the progressbar with the value option specified:

`$(` `".selector"` `).progressbar({ value: 25 });`

Get or set the value option, after initialization:

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

## 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.

Code examples:

Invoke the destroy method:

`$(` `".selector"` `).progressbar(` `"destroy"` `);`

### disable()

Disables the progressbar.

- This method does not accept any arguments.

Code examples:

Invoke the disable method:

`$(` `".selector"` `).progressbar(` `"disable"` `);`

### enable()

Enables the progressbar.

- This method does not accept any arguments.

Code examples:

Invoke the enable method:

`$(` `".selector"` `).progressbar(` `"enable"` `);`

### option( optionName )Returns: Object

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

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

Code examples:

Invoke the method:

`var` `isDisabled = $(` `".selector"` `).progressbar(` `"option"``,` `"disabled"` `);`

### option()Returns: PlainObject

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

- This method does not accept any arguments.

Code examples:

Invoke the method:

`var` `options = $(` `".selector"` `).progressbar(` `"option"` `);`

### 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.

Code examples:

Invoke the method:

`$(` `".selector"` `).progressbar(` `"option"``,` `"disabled"``,` `true` `);`

### option( options )

Sets one or more options for the progressbar.

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

Code examples:

Invoke the method:

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

### value()Returns: Number or Boolean

Gets the current value of the progressbar.

- This method does not accept any arguments.

Code examples:

Invoke the method:

`var` `progressSoFar = $(` `".selector"` `).progressbar(` `"value"` `);`

### value( value )

Sets the current value of the progressbar.

- value
  Type: Number or Boolean
  The value to set. See the `value` option for details on valid values.

Code examples:

Invoke the method:

`$(` `".selector"` `).progressbar(` `"value"``, 50 );`

### widget()Returns: jQuery

Returns a `jQuery` object containing the progressbar.

- This method does not accept any arguments.

Code examples:

Invoke the widget method:

`var` `widget = $(` `".selector"` `).progressbar(` `"widget"` `);`

## Events

### change( event, ui )Type: `progressbarchange`

Triggered when the value of the progressbar changes.

- event
  Type: Event
- ui
  Type: Object

Code examples:

Initialize the progressbar with the change callback specified:

`$(` `".selector"` `).progressbar({` `` `change:` `function``( event, ui ) {}` `});`

Bind an event listener to the progressbarchange event:

`$(` `".selector"` `).on(` `"progressbarchange"``,` `function``( event, ui ) {} );`

### complete( event, ui )Type: `progressbarcomplete`

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

- event
  Type: Event
- ui
  Type: Object

Code examples:

Initialize the progressbar with the complete callback specified:

`$(` `".selector"` `).progressbar({` `` `complete:` `function``( event, ui ) {}` `});`

Bind an event listener to the progressbarcomplete event:

`$(` `".selector"` `).on(` `"progressbarcomplete"``,` `function``( event, ui ) {} );`

### create( event, ui )Type: `progressbarcreate`

Triggered when the progressbar is created.

- event
  Type: Event
- ui
  Type: Object

Code examples:

Initialize the progressbar with the create callback specified:

`$(` `".selector"` `).progressbar({` `` `create:` `function``( event, ui ) {}` `});`

Bind an event listener to the progressbarcreate event:

`$(` `".selector"` `).on(` `"progressbarcreate"``,` `function``( event, ui ) {} );`

## Examples:

#### 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.2/themes/base/jquery-ui.css"``>`
`` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.3.js"``></``script``>`
`` `<``script` `src``=``"http://code.jquery.com/ui/1.9.2/jquery-ui.js"``></``script``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"progressbar"``></``div``>`
`<``script``>`
`$( "#progressbar" ).progressbar({`
`` `value: 37`
`});`
`</``script``>`
`</``body``>`
`</``html``>`

#### Demo:

#### Example: A simple jQuery UI Indeterminate 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.2/themes/base/jquery-ui.css"``>`
`` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.3.js"``></``script``>`
`` `<``script` `src``=``"http://code.jquery.com/ui/1.9.2/jquery-ui.js"``></``script``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"progressbar"``></``div``>`
`<``script``>`
`$( "#progressbar" ).progressbar({`
`` `value: false`
`});`
`</``script``>`
`</``body``>`
`</``html``>`

#### Demo: