Open In App

JQuery UI | Progressbar method

Last Updated : 27 Feb, 2019
Comments
Improve
Suggest changes
Like Article
Like
Report

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:




<!DOCTYPE html>
<html>
  
<head>
    <title>my progressbar</title>
    <link rel="stylesheet" 
          type="text/css" 
href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.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> 






                        








Output:






                            
                            
                        


                                                                              

                                        

                                                                                

                                                                

                            
                                

                                
                                        Next Article
                                        
                                    
                                    
                                    

                                        jQuery :checkbox Selector
                                    

                                

                                                        

                        

                            

                                        

                                            

                                                

                                                

                                                    
K

        

            
        

        

                                                

                                                

                                                    kanugargng                                                

                                                

                                                

            
                                            

                                            
                                        

                                        

                                            
                                            

                                                
                                                
                                            

                                            
                                                                            

                                    Improve
                                    
                                

                            
                                        

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                    

                                                                                

                        


                                                

                        
                                                 

                                
Similar Reads

                                

                                    
                                

                            

                        


                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

                

        

            

                

                    

                    
                
 
                
                            

                                

                            


                            


            

        
  

        

                




	
	
	

	
	
	
	    

	
	

	
	



                
        

    

    

        

            

            

        

    
















	

    
  

  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox