jQuery UI Progressbar

by

To determine the completion percentage of operation or progress, the jQuery UI Progressbar is used.

A jQuery UI Progressbar can be of two types:

  • Determinate Progressbar
  • Indeterminate Progressbar
Determinate Progressbar:

In a condition, where the system can accurately update the current status, the Determinate progress bar is used and is used in such conditions only. It never fills from left to right, then loops back to empty for a single process.

Indeterminate Progressbar:

To get the user feedback, the Indeterminate Progressbar is used.

Syntax:

The Progressbar() method can be used in two forms:

$(selector, context).progressbar (options) Method

OR

$(selector, context).progressbar (“action”, params) Method

First Method:

To indicate that an HTML element can be managed in the form of a progress bar, the Progressbar (options) method is used. The appearance and behavior of progress bars are specified by the “options” parameter which is an object.

Syntax:

$(selector, context).progressbar (options);

Multiple options can also be used at a time using a JavaScript object. For this, they need to be separated using a comma.

Syntax:
$(selector, context).progressbar({option1: value1, option2: value2..... });

The various options that can be used with this method are listed below:

Option
Uses
disabled To disable the progress bars, when set to true. The default value is false.
max To set the maximum value for a progress bar. The default value is 100.
value To define the initial value of the progress bar. The default value is 0.

 

Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: crimson;
border: 2px solid brown;
}
</style>
<script>
$(function() {
$( "#progress" ).progressbar({
value: 70
});
});
</script>
</head>
<body>
<div id="progress"></div>
</body>
</html>

Explanation:

In the above example, we are displaying the functionality of the progress bar.