## Progressbar Widget version 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.

### Theming

The progressbar widget uses the jQuery UI CSS framework to style its look and feel. If progressbar specific styling is needed, the following CSS class names can be used:

- `ui-progressbar`: The outer container of the progressbar. This element will additionally have a class of `ui-progressbar-indeterminate` for indeterminate progressbars.
  - `ui-progressbar-value`: The element that represents the filled portion of the progressbar.
    - `ui-progressbar-overlay`: Overlay used to display an animation for indeterminate progressbars.

### Dependencies

- UI Core
- Widget Factory

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

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

Get or set the `disabled` option, after initialization:

1 2 3 4 5 |
    // gettervar 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:

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

Get or set the `max` option, after initialization:

1 2 3 4 5 |
    // gettervar 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:

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

Get or set the `value` option, after initialization:

1 2 3 4 5 |
    // gettervar value = $( ".selector" ).progressbar( "option", "value" ); // setter$( ".selector" ).progressbar( "option", "value", 25 );

## Methods

### destroy()Returns: jQuery (plugin only)

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:

1 |
    $( ".selector" ).progressbar( "destroy" );

### disable()Returns: jQuery (plugin only)

Disables the progressbar.

- This method does not accept any arguments.

Code examples:

Invoke the disable method:

1 |
    $( ".selector" ).progressbar( "disable" );

### enable()Returns: jQuery (plugin only)

Enables the progressbar.

- This method does not accept any arguments.

Code examples:

Invoke the enable method:

1 |
    $( ".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:

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

### option()Returns: PlainObject

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

- This signature does not accept any arguments.

Code examples:

Invoke the method:

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

### option( optionName, value )Returns: jQuery (plugin only)

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:

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

### option( options )Returns: jQuery (plugin only)

Sets one or more options for the progressbar.

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

Code examples:

Invoke the method:

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

### value()Returns: Number or Boolean

Gets the current value of the progressbar.

- This signature does not accept any arguments.

Code examples:

Invoke the method:

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

### value( value )Returns: jQuery (plugin only)

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:

1 |
    $( ".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:

1 |
    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

Note: The `ui` object is empty but included for consistency with other events.

Code examples:

Initialize the progressbar with the change callback specified:

1 2 3 |
    $( ".selector" ).progressbar({  change: function( event, ui ) {}});

Bind an event listener to the progressbarchange event:

1 |
    $( ".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

Note: The `ui` object is empty but included for consistency with other events.

Code examples:

Initialize the progressbar with the complete callback specified:

1 2 3 |
    $( ".selector" ).progressbar({  complete: function( event, ui ) {}});

Bind an event listener to the progressbarcomplete event:

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

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

Triggered when the progressbar is created.

- event
  Type: Event
- ui
  Type: Object

Note: The `ui` object is empty but included for consistency with other events.

Code examples:

Initialize the progressbar with the create callback specified:

1 2 3 |
    $( ".selector" ).progressbar({  create: function( event, ui ) {}});

Bind an event listener to the progressbarcreate event:

1 |
    $( ".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="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.10.4/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="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script></head><body> <div id="progressbar"></div> <script>$( "#progressbar" ).progressbar({  value: false});</script> </body></html>

#### Demo: