Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Add Class
Remove Class
Switch Class
Toggle Class
Show
Hide
Toggle
Animate
Effect
Utilities
Position
About jQuery UI
Getting Started
Upgrade Guide
Changelog
Roadmap
Subversion Access
UI Developer Guidelines
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget

Functional demo:

progressbar

Default determinate progress bar.

Overview

The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's 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 complete. A determinate progress bar should never fill from left to right, then loop back to empty for a single process -- if the actual percent complete status cannot be calculated, an indeterminate progress bar (coming soon) or spinner animation is a better way to provide user feedback.

Dependencies

  • UI Core

Example

A simple jQuery UI Progressbar.

$("#progressbar").progressbar({ value: 37 });


<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js"></script>

  <script type="text/javascript">
  $(document).ready(function(){
    $("#progressbar").progressbar({ value: 37 });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="progressbar"></div>

</body>
</html>

Options

  • value

    Type:
    Number
    Default:
    0

    The value of the progressbar.

    Code examples

    Initialize a progressbar with the value option specified. 
    $('.selector').progressbar({ value: 37 });
    Get or set the value option, after init. 
    //getter
var value = $('.selector').progressbar('option', 'value');
//setter
$('.selector').progressbar('option', 'value', 37);

Events

  • change

    Type:
    progressbarchange

    This event is triggered when the value of the progressbar changes.

    Code examples

    Supply a callback function to handle the change event as an init option. 
    $('.selector').progressbar({
   change: function(event, ui) { ... }
});
    Bind to the change event by type: progressbarchange. 
    $('.selector').bind('progressbarchange', function(event, ui) {
  ...
});

Methods

  • destroy

    Signature:
    .progressbar( 'destroy' )

    Remove the progressbar functionality completely. This will return the element back to its pre-init state.

  • disable

    Signature:
    .progressbar( 'disable' )

    Disable the progressbar.

  • enable

    Signature:
    .progressbar( 'enable' )

    Enable the progressbar.

  • option

    Signature:
    .progressbar( 'option' , optionName , [value] )

    Get or set any progressbar option. If no value is specified, will act as a getter.

  • value

    Signature:
    .progressbar( 'value' , [value] )

    This method gets or sets the current value of the progressbar.

Theming

The jQuery UI Progressbar plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.progressbar.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
   <div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>

Note: This is a sample of markup generated by the progressbar plugin, not markup you should use to create a progressbar. The only markup needed for that is <div></div>.