Progressbar Widget

Categories: Widgets

Progressbar Widgetversion added: 1.6

Description: Display status of a determinate process.

QuickNavExamples

Options

Methods

Events

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.

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

disabled 

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

Initialize the progressbar with the disabled option specified:

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

Get or set the disabled option, after initialization:

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).progressbar( "option", "disabled" );
 
// Setter
$( ".selector" ).progressbar( "option", "disabled", true );

max 

Type: Number
Default: 0
The maximum value of the progressbar.
Code examples:

Initialize the progressbar with the max option specified:

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

Get or set the max option, after initialization:

1
2
3
4
5
 
// Getter
var max = $( ".selector" ).progressbar( "option", "max" );
 
// Setter
$( ".selector" ).progressbar( "option", "max", 1024 );

value 

Type: Number
Default: 0
The value of the progressbar.
Code examples:

Initialize the progressbar with the value option specified:

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

Get or set the value option, after initialization:

1
2
3
4
5
 
// Getter
var 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

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
    The value to set.
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.

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.

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.

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 ) {} );

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.9.2/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.8.3.js"></script>
  <script src="//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: