jQuery UI API - Progressbar Widget

Category

Widgets

Usage

Description:Displays a determinate or indeterminate progress state.

Version added:1.6

The progress bar is designed to display the current completion percentage of a process. The progress bar is flexibly sized via CSS, and by default it scales to fit the size of its parent container.

A determinate progress bar should only be used when the system can accurately update the current state. A determinate progress bar does not fill from left to right and then loop back to empty – if the actual state cannot be calculated, use an indeterminate progress bar to provide user feedback.

Theming

The Progressbar Widget uses thejQuery UI CSS frameworkto define its look and feel styles. If you need to use progress bar-specific styles, you can use the following CSS class names:

  • ui-progressbar: The outer container of the progress bar. This element additionally adds a ... for indeterminate progress bars.ui-progressbar-indeterminate class。
    • ui-progressbar-value: This element represents the filled portion of the progress bar.
      • ui-progressbar-overlay: An overlay used to display animation for an indeterminate progress bar.

Dependencies

Additional Notes

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

Examples

A simple jQuery UI indeterminate progress bar.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>进度条部件（Progressbar Widget）演示</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>

Other Extensions