Progress Bar using JQuery UI

We will display one progress bar and develop few applications using features of progress bar. Let us start with displaying simple progress bar.

<div id="progress_bar"></div>
$(document).ready(function() {
$( "#progress_bar" ).progressbar({
  value: 40,


  • Video Tutorial on JQuery UI Progress Bar

Maximum and Minimum value of progress bar

We can set maximum and minimum value of the progress bar, within these two limits our value will change the reflect the present condition.
$( "#progress_bar" ).progressbar({
  value: 40,

Reading value.

Progress bar shows a process so status of the process can be displayed relatively by the value of the progress bar. We can also read the present value of the progress bar
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );

Setting the value

We can change the value of the progress bar like this.
$( "#progress_bar" ).progressbar( "option", "value", 60 );

Changing value dynamically

We can change the value of the progress bar by connecting with different events. To understand how to work on this we will keep two buttons one is to increment the progress bar and other is to decrease the value of the progress bar. We will be using Click event of buttons to trigger the changes in value.
DEMO of changing value of Progress bar with Click event of buttons
DEMO reading and setting value for second progress bar

Enable or Disable progress bar

Based on our condition we can enable or disable our progress bar.


$("#progress_bar").progressbar( "enable" );


$("#progress_bar").progressbar( "disable" );
Here is a script where can enable or disable progress bar based on the condition of a checkbox.
DEMO of enable or disable Progress Bar based on Change function of Checkbox

Counting number of chars entered by user

You can see one example on counting the number of characters entered by user inside a textarea and the same can be reflected by a progress bar.
DEMO of textarea counter with Progress Bar


* indicates required
Subscribe to plus2net

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2022 All rights reserved worldwide Privacy Policy Disclaimer