jQueryUI Progressbar Plugin With Examples [Latest]

We have discussed about different jQuery UI plugins like datepicker, accordion and autocomplete in the previous posts. We will discuss about another interesting plugin in this post, the Progressbar plugin

The progressbar is designed to indicate the percentage of completeness for a process. jQuery UI provides a plugin to incorporate this functionality in your applications. We can classify progressbar into two types, determinate and indeterminate . We use determinate progressbar in our application if the actual status can be calculated otherwise indeterminate progressbar is used.

Progressbar Plugin Options

In this section, we will discuss about available options to customize the progressbar plugin. We have used many of these options in the Progressbar plugin in Action section.

Options	Syntax	Description
disabled	$( “.selector” ).progressbar({ disabled: true });	Setting this option to true disables the progressbar.
max	$( “.selector” ).progressbar({ max: 1024 });	This option denotes the maximum value of the progressbar.
value	$( “.selector” ).progressbar({ value: 25 });	Integer or Boolean value of the progressbar. Integer value between zero max and indeterminate progressbar can be created if the boolean value is set to false.

Options

Syntax

Description

disabled

$( “.selector” ).progressbar({ disabled: true });

Setting this option to true disables the progressbar.

max

$( “.selector” ).progressbar({ max: 1024 });

This option denotes the maximum value of the progressbar.

value

$( “.selector” ).progressbar({ value: 25 });

Integer or Boolean value of the progressbar.

Integer value between zero max and indeterminate progressbar can be created if the boolean value is set to false.

The above table briefly describes the available options to customize the progressbar plugin.

Progressbar Plugin Methods

In this section, we will discuss about different methods associated with jQueryUI progressbar plugin. We have used many of these methods in the Progressbar plugin in Action section.

Methods	Usage	Description
destroy()	$( “.selector” ).progressbar( “destroy” );	This method will completely remove the progressbar functionality.
disable()	$( “.selector” ).progressbar( “disable” );	This method is used to disable the progressbar functionality.
enable()	$( “.selector” ).progressbar( “enable” );	This method enables the progressbar functionality.
instance()	$( “.selector” ).progressbar( “instance” );	This method is used to get the progressbar’s instance object
option( optionName, value )	$( “.selector” ).progressbar( “option”, “disabled”, true );	This method is used to set the value of the progressbar option associated with the optionName.
value()	$( “.selector” ).progressbar( “value”);	This method is used to get the value of the progressbar.
widget()	$( “.selector” ).progressbar( “widget” );	This method will return a jQuery object which contains the progressbar.

The above table briefly describes the different methods used to customize the progressbar plugin.

Progressbar Plugin Events

In this section, we will discuss about different events associated with jQueryUI progressbar plugin. We have used many of these events the Progressbar plugin in Action section.

Events	Usage	Description
change( event, ui )	$( “.selector” ).progressbar({,change: function( event, ui ) {}});	This event is fired when the value is changed and executes the callback function.
complete( event, ui )	$( “.selector” ).progressbar({,complete: function( event, ui ) {}});	This event is fired when the value of the progressbar reaches it’s maximum.
create( event, ui )	$( “.selector” ).progressbar({,create: function( event, ui ) {}});	This event is fired when the progressbar is created.

The above table briefly describes the events associated with progressbar plugin.

Progressbar Plugin in Action

In this section, we will try different examples to explore the uses of jQueryUI Progressbar plugin.

Default Functionality

The following example demonstrates the default functionality of a determinate progress bar. In this example, you can see an integer value is specified to demonstrate the progressbar of a determinate process.

progressbar-determinate.html


&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Progressbar - Default Determinate&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
    $( "#progressbar" ).progressbar({
      value: 60
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="progressbar"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQuery UI Progressbar - Default Determinate</title>

$(function() {

$( "#progressbar" ).progressbar({

value: 60

});

</script>

</head>

<body>

</body>

</html>

You will see the following output in browser.

The following example demonstrates the default functionality of a indeterminate progress bar. In this example, we set the value to false to demonstrate progressbar of an indeterminate process.

progressbar-indeterminate.html


&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Progressbar - Default Indeterminate&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
    $( "#progressbar" ).progressbar({
      value: false
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="progressbar"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQuery UI Progressbar - Default Indeterminate</title>

$(function() {

$( "#progressbar" ).progressbar({

value: false

});

</script>

</head>

<body>

</body>

</html>

You will see the following output in your browser.

Progressbar with Custom Label

The following example demonstrates the progressbar plugin with custom label.

progressbar-customlabel.html


&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Progressbar - Custom Label&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;style&gt;
.ui-progressbar{
	position: relative;
}
.progress-label {
	position: absolute;
	left: 50%;
	top: 4px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff;
}
&lt;/style&gt;
  &lt;script&gt;
 $(function() {
    var progressbar = $( "#progress-bar" ),
      progressLabel = $( ".progress-label" );
    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Loading Completed!" );
      }
    });
    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;
      progressbar.progressbar( "value", val + 2 );
      if ( val &lt; 99 ) {
        setTimeout( progress, 90 );
      }
    }
    setTimeout( progress, 2500 );
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="progress-bar"&gt;&lt;div class="progress-label"&gt;Loading...&lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQuery UI Progressbar - Custom Label</title>

<style>

.ui-progressbar{

position: relative;

}

.progress-label {

position: absolute;

left: 50%;

top: 4px;

font-weight: bold;

text-shadow: 1px 1px 0 #fff;

}

</style>

$(function() {

var progressbar = $( "#progress-bar" ),

progressLabel = $( ".progress-label" );

progressbar.progressbar({

value: false,

change: function() {

progressLabel.text( progressbar.progressbar( "value" ) + "%" );

complete: function() {

progressLabel.text( "Loading Completed!" );

}

});

function progress() {

var val = progressbar.progressbar( "value" ) || 0;

progressbar.progressbar( "value", val + 2 );

if ( val < 99 ) {

setTimeout( progress, 90 );

}

setTimeout( progress, 2500 );

});

</script>

</head>

<body>

<div id="progress-bar"><div class="progress-label">Loading...</div></div>

</body>

</html>

You will see the following output in the browser.

In this example, you can see the use of change and complete events. I hope you understood the basic concepts of progressbar plugin and you can try using all the options, methods and events mentioned in this post.

That’s all for now and you will see more jQuery plugins in the coming posts.

jQueryUI Progressbar Plugin With Examples [Latest]

Byadmin

Contents

Progressbar Plugin Options

Progressbar Plugin Methods

Progressbar Plugin Events

Progressbar Plugin in Action

Default Functionality

Progressbar with Custom Label

Like this:

By admin

Related Post

How to get an element with a specific index in jQuery With Example [Latest]

Find all the descendants of an element in jQuery With Example [Latest]

jQuery UI Button and Buttonset Widget With Examples [Latest]

Leave a ReplyCancel reply

You missed

[Solved] org.hibernate.HibernateException: get is not valid without active transaction With Examples [Latest]

How to Generate XML from XSD in Eclipse Example [Latest]

Queue Implementation in Java using Array With Examples [Latest]

Depth First Search (DFS) for a Graph With Examples [Latest]

Byadmin

Contents

Progressbar Plugin Options

Progressbar Plugin Methods

Progressbar Plugin Events

Progressbar Plugin in Action

Default Functionality

Progressbar with Custom Label

Share this:

Like this:

By admin

Related Post

Leave a ReplyCancel reply

You missed