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

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

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.

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.

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.
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer