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.

jQuery UI Widget : Progressbar