Latest web development tutorials

jQuery UI API - progress bar member (Progressbar Widget)

category

Widgets (Widgets)

usage

Description: Displays a definite or indefinite process state.

New version: 1.6

A progress bar is designed to show the percentage of completion of the current progress. A progress bar by CSS coding flexibility to adjust the size, the default will be scaled to accommodate the size of the parent container.

Determining a progress bar can only be used in the system can accurately update the current status of the case. Determining a progress bar will not fill from left to right, then loops back empty - if you can not calculate the actual state, use the indeterminate progress bar in order to provide user feedback.

Theming

A progress bar member (Progressbar Widget) using jQuery UI CSS framework to define the look and feel of its style. If you need to use the specified style progress bar, you can use the following CSS class name:

  • ui-progressbar : the progress of the outer container. This element of uncertainty will add an additional progress bar ui-progressbar-indeterminate , class.
    • ui-progressbar-value : This element represents the progress of the filling portion.
      • ui-progressbar-overlay : overlay for displaying animation is indeterminate progress bar.

rely

Additional information

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

Examples

A simple jQuery UI indeterminate progress bar (Indeterminate Progressbar). 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> progress bar member (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>