Progressbar Widget

jQuery

Progressbar Widget

Categories: Widgets

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.

Dependencies

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:

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

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

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

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

disable()

Disables the progressbar.

This method does not accept any arguments.

Code examples:

Invoke the disable method:

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

enable()

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 method does not accept any arguments.

Code examples:

Invoke the method:

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

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

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

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

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

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:

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

Code examples:

Initialize the progressbar with the complete callback specified:

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

Code examples:

Initialize the progressbar with the create callback specified:

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

                                  
                                    
                                      
                                        <!doctype html>
                                      
                                    
                                  
                                  
                                    
                                      
                                        <html lang="en">
                                      
                                    
                                  
                                  
                                    
                                      
                                        <head>
                                      
                                    
                                  
                                  
                                    
                                        <meta charset="utf-8">
                                    
                                  
                                  
                                    
                                        <title>progressbar demo</title>
                                    
                                  
                                  
                                    
                                        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
                                    
                                  
                                  
                                    
                                        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                                    
                                  
                                  
                                    
                                        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
                                    
                                  
                                  
                                    
                                      
                                        </head>
                                      
                                    
                                  
                                  
                                    
                                      
                                        <body>
                                      
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        <div id="progressbar">
                                        </div>
                                      
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        <script>
                                        
                                      
                                    
                                  
                                  
                                    
                                      $( "#progressbar" ).progressbar({
                                    
                                  
                                  
                                    
                                        value: 37
                                    
                                  
                                  
                                    
                                      });
                                    
                                  
                                  
                                    
                                      
                                        </script>
                                      
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        </body>
                                      
                                    
                                  
                                  
                                    
                                      
                                        </html>

Example: A simple jQuery UI Indeterminate Progressbar

                                  
                                    
                                      
                                        <!doctype html>
                                      
                                    
                                  
                                  
                                    
                                      
                                        <html lang="en">
                                      
                                    
                                  
                                  
                                    
                                      
                                        <head>
                                      
                                    
                                  
                                  
                                    
                                        <meta charset="utf-8">
                                    
                                  
                                  
                                    
                                        <title>progressbar demo</title>
                                    
                                  
                                  
                                    
                                        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
                                    
                                  
                                  
                                    
                                        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                                    
                                  
                                  
                                    
                                        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
                                    
                                  
                                  
                                    
                                      
                                        </head>
                                      
                                    
                                  
                                  
                                    
                                      
                                        <body>
                                      
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        <div id="progressbar">
                                        </div>
                                      
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        <script>
                                        
                                      
                                    
                                  
                                  
                                    
                                      $( "#progressbar" ).progressbar({
                                    
                                  
                                  
                                    
                                        value: false
                                    
                                  
                                  
                                    
                                      });
                                    
                                  
                                  
                                    
                                      
                                        </script>
                                      
                                    
                                  
                                  
                                    
                                       
                                    
                                  
                                  
                                    
                                      
                                        </body>
                                      
                                    
                                  
                                  
                                    
                                      
                                        </html>

POWERED BYHERONOTE

previous page start next page

Progressbar Widget

jQuery

Progressbar Widget