Progress bar with dynamically changing value 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>
<script>
$(document).ready(function() {
//////////////////////////
$( "#progress_bar" ).progressbar({
  value: 40,
  max:100,
  min:0
});

//////
})
</script>

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,
  max:100,
  min:0
});

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.

Enable

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

Disable

$("#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

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Progress Bar using JQuery UI

Video Tutorial on JQuery UI Progress Bar