jQuery UI API - Progressbar Widget

Usage

Description: Displays a determinate or indeterminate progress status.

Version Added: 1.6

The progressbar is designed to display the current completion percentage of a progress. It is flexible in size through CSS and defaults to scaling to fit the parent container.

A determinate progressbar should only be used in situations where the system can accurately update the current status. A determinate progressbar does not fill from left to right, then loop back to empty—if the actual status cannot be calculated, an indeterminate progressbar should be used to provide user feedback.

Theming

The Progressbar Widget uses the jQuery UI CSS Framework to define its visual style and appearance. For specific styling of the progressbar, you can use the following CSS class names:

ui-progressbar: The outer container of the progressbar. This element will additionally receive a ui-progressbar-indeterminate class for indeterminate progressbars.
ui-progressbar-value: This element represents the filled portion of the progressbar.
ui-progressbar-overlay: Used to display the animation overlay for indeterminate progressbars.

Dependencies

Additional Notes

This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget's specific CSS file as a starting point.

Example

A simple jQuery UI indeterminate progressbar.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progressbar Widget 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>

View Demo