Progress Bar using JQuery

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,


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.

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.

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.

Post your comments , suggestion , error , requirements etc here .

Most Popular JQuery Scripts


Two dependant list boxes


Calendar with Date Selection


Data change by Slider


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