[an error occurred while processing this directive]

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.

                  

[an error occurred while processing this directive]