JQuery UI Progressbar

Often times a webpage takes quite a bit of time to complete some function. For instance user form submission or data retrieval tasks might take large of amount of time to process. In such cases it is very convenient to show the users the amount of task completed and the amount remaining. Progress bar is one of the most useful widgets for such scenarios. Progress bar visually shows amount of processing done as well as the amount of it left. JQuery UI progressbar() function allows developers to convert an ordinary element to a progress bar. To create progress bar, simply call progressbar() function with value parameter on any input element which you want to convert to progress bar. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Progressbar</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
          
            var i = 0;                    
            function incProgress () {        
               setTimeout(function () {   
                  $(function() {

                         $( ".progress" ).progressbar({
                             value:i
                         });
                     });         
                  i++;                    
                  if (i < 101) {            
                     incProgress();             
                  }                        
               }, 200)
            }

         incProgress(); 
         
      </script>
       
       <style>
           .progress{
               width: 500px;
               margin: 0 auto;
           }
       
       </style>
   </head>
   <body>
      <!-- HTML --> 
      <div class="progress">
         
      </div>
   </body>
</html>

Download Code Run Code

In the above webpage a simple div element is converted to progress bar by calling progressbar() function on it. If you look at the script an iterative function incProgress is created. This function calls itself after every 200 milliseconds and each time it increments the value of the value parameter inside the progressbar() function. The iterative function stop executing after 100 execution. When you run the page, you should see a progress bar whose progress starts from 0 and increases until progress bar is full

Progress bar with Optional Parameters

You can also pass additional optional parameters to the progressbar() function to change the behavior of progress bar. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters max is passed to menu function. The max specifies the number of units required to fill a progress bar. By default this value is 100. If you set the max parameter to 400 and value to 100, it will only fill 25% of the progress bar. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Progressbar</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
          
            var i = 0;                    
            function incProgress () {        
               setTimeout(function () {   
                  $(function() {

                         $( ".progress" ).progressbar({
                             value:i,
                             max:400
                         });
                     });         
                  i++;                    
                  if (i < 101) {            
                     incProgress();             
                  }                        
               }, 100)
            }

         incProgress(); 
         
      </script>
       
       <style>
           .progress{
               width: 500px;
               margin: 0 auto;
           }
       
       </style>
   </head>
   <body>
      <!-- HTML --> 
      <div class="progress">
         
      </div>
   </body>
</html>

Download Code Run Code

<<< JQuery UI MenuJQuery UI Slider >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .