jQuery UI Progressbar

Progressbar specifies the completion percentage of an operation or progress.

Progressbar can be categorized in two types:

Determinate progressbar
Indeterminate progressbar

Determinate Progressbar:

Determinate progress bar is only used in situation where the system can accurately update the current status. The determinate progress bar should never fill from left to right, then loop back to empty for a single process.

Indeterminate Progressbar:

The Indeterminate progressbar is used to provide user feedback.

Syntax:

You can use the progressbar() method in two forms:

First Method

The progressbar (options) method specifies that an HTML element can be managed in the form of a progress bar. Here the "options" parameter is an object that specifies the appearance and behavior of progress bars.

Syntax:

You can use one or more options at a time using JavaScript object. In the case of more than one options, you have to separate them using a comma as follows:

Following is a list of different options that can be used with this method.

Option	Description
disabled	If you set this option to true then it disables the progress bars. By default its value is false.
max	This option is used to set the maximum value for a progress bar. By default its value is 100.
value	This option specifies the initial value of the progress bar. By default its value is 0.

Example of jQueryUI Progressbar() method:

Let's take a simple example to demonstrate the functionality of progress bar passing no parameter to the progressbar() method.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         .ui-widget-header {
            background: blue;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      <script>
         $(function() {
            $( "#progressbar-1" ).progressbar({
               value: 30
            });
         });
      </script>
   </head>
   <body> 
      <div id="progressbar-1"></div> 
   </body>
</html>

Test it Now

Next TopicjQuery UI Selectmenu

← prev next →