Progressbar Widget

Categories: Widgets

Progressbar Widgetversion added: 1.6

Description: Display status of a determinate or indeterminate 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.

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 for overrides or as keys for the classes option:

  • ui-progressbar: The outer container of the progressbar. This element will additionally have a class of ui-progressbar-indeterminate for indeterminate progressbars. For determinate progressbars, the ui-progressbar-complete class is added once the maximum value is reached.
    • 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

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

classes 

Type: Object
Default: 
{
  "ui-progressbar": "ui-corner-all",
  "ui-progressbar-complete": "ui-corner-right",
  "ui-progressbar-value": "ui-corner-left"
}

Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.

Code examples:

Initialize the progressbar with the classes option specified, changing the theming for the ui-progressbar class:

1
2
3
4
5
 
$( ".selector" ).progressbar({
  classes: {
    "ui-progressbar": "highlight"
  }
});

Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui-progressbar class:

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).progressbar( "option", "classes.ui-progressbar" );
 
// Setter
$( ".selector" ).progressbar( "option", "classes.ui-progressbar", "highlight" );

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: 100
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 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
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" );

instance()Returns: Object

Retrieves the progressbar's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the progressbar plugin has loaded.

  • This method does not accept any arguments.
Code examples:

Invoke the instance method:

1
 
$( ".selector" ).progressbar( "instance" );

option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

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

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

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

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

Examples:

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

Demo:

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

Demo: