jQuery UI Widget : Progressbar

This page discusses - jQuery UI Widget : Progressbar

Ads

jQuery UI Widget : Progressbar

     

jQuery UI Widget : Progressbar

This widget is used to display the progress of a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default.

This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete.

The following code line is used to place a progress bar inside a element like div :

$("#progressbar").progressbar({ value: 37 }); For options, events ,method and theming click here

For options, events ,method and theming click here

EXAMPLE :

progressbar.html

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8
/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4
/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8
/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
});
</script>
</head>
<body style="font-size:62.5%;">

<div id="progressbar"></div>

</body>
</html>

Output :

Download Source Code

Learn from experts! Attend jQuery Training classes.

Advertisements

Share on Google+Share on Google+

jQuery UI Widget : Progressbar

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

Ads
 

Discuss: jQuery UI Widget : Progressbar  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:1
Billy
June 27, 2012
Examples

If you're going to post examples, at least do something original instead of copying the damn jQuery website. Jeez.

Ads

 

Ads