JQuery UI | Progressbar method

Jquery UI (user interface) is the JavaScript library built on top of jQuery JavaScript Library. It is the collection of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Progress bars tells us the percentage of our task completed and how much it is left. It is a GUI widget which creates a type of interaction between the user and the system.
There is two type of progress bar

  • determinate progress bar
  • indeterminate progress bar

Syntax:
The progressbar() method has two forms and the use of each form depends on the requirement. These are as follows :-



$(selector, context).progressbar (options)
$(selector, context).progressbar ("action", params)

The following table shows the different options that can be used with this method:

OPTION PURPOSE
disabled When the progress bar disables set to true. By default its value is false.
max Maximum value for a progress bar. By default its value is 100.
value Initial value of the progress bar. By default its value is 0.

Example: Below is the implementation of the above explained method:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>my progressbar</title>
    <link rel="stylesheet" 
          type="text/css" 
    
    <script type="text/javascript" 
            src="https://code.jquery.com/jquery-1.10.2.js">
    </script>
    
    <script type="text/javascript" 
            src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>
    
    <style type="text/css">
        .ui-widget-header {
            background: gray;
            border: 1px solid black;
        }
    </style>
    <script>
        $(function() {
            $("#progressbar").progressbar({
                value: 90
  
            });
        });
    </script>
  
</head>
  
<body>
    <div id="progressbar">
    </div>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.