jQueryUI Progressbar Plugin

Filed Under: jQuery

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.

Contents

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.

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


<!doctype html>
<html>
<head>
  <title>jQuery UI Progressbar - Default Determinate</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#progressbar" ).progressbar({
      value: 60
    });
  });
  </script>

</head>
<body>
<div id="progressbar"></div>
</body>
</html>

You will see the following output in browser.
Default Progressbar

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


<!doctype html>
<html>
<head>
  <title>jQuery UI Progressbar - Default Indeterminate</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#progressbar" ).progressbar({
      value: false
    });
  });
  </script>

</head>
<body>
<div id="progressbar"></div>
</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


<!doctype html>
<html>
<head>
  <title>jQuery UI Progressbar - Custom Label</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <style>
.ui-progressbar{
	position: relative;
}  
.progress-label {
	position: absolute;
	left: 50%;
	top: 4px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff;
}
</style>

  <script>
 $(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.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages