Bootstrap loader on Jquery AJAX

Bootstrap progress bars can be set up as a loader when AJAX is busy fetching data from a backend source. The code snippet below has a div element with ID "loading" displaying an animated stripped bar.

<div class="container">
  <div class="row">
   <div class="col-xs-12">
    <div id="loading">
    
    <div class="progress progress-striped active">
     <div class="progress-bar" style="width: 100%;">
      <span class="sr-only">60% Complete</span>
     </div>
    </div>
    
    </div>
   </div>
  </div>
 </div>

The snippet below makes a JQuery AJAX call. In the event of either success or error, the div with ID "loading" is hidden.

<script>
  $(document).ready(function (){
   function init(){
    $.ajax({    
     url: 'gethours.php?action=get-time',  
     dataType: 'json',  
     success: function(json) {  
      $("#loading").hide();
      var jlength = Object.keys(json.return_param).length;
      alert('parameter1 = '+jlength); 
      
     },  
     error: function(xhr, ajaxOptions, thrownError) { 
      $("#loading").hide();
      alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText + "\r\n" + "Err-01");  
     }  
    });    
   }
   
   init();
  })
 </script>

The screen shot below shows the animated stripped bar while AJAX is making the calling. For purposes of this post, I've placed a 5 second delay on the back end.

Need help on some web coding task? Let me know about it. Email me at jrwxpun.dolor@gmqoapmssail.co57agsblm and I'll be more than happy to blog about it with my thoughts.

Hosting of the sample pages were provided for by the following:

• http://www.freescripthost.com/
• http://freewebhostingarea.com/