title: How do I give the user a progress bar
body: <p>I have this <a href="http://posnation.com/pre_config/step3/Quick/1" rel="nofollow noreferrer">site</a> here </p>
  
  <p>I have an ajax request that calls a php page via this command</p>
  
  <pre><code>var successCallback = function(responseText, textStatus, XMLHttpRequest) {
   // rebind your event handlers here
     // blue item expand
     $('.item-blue .btn-expand').click(function () {
  
         var btn = $(this);
         $(this).parent().prev().slideToggle(function () {
             btn.toggleClass('btn-expand-h');
         });
         return false;
     });
  };
  
  $("#main_content").load("/pre_config/function.php?type="+type+"piz&amp;count=1", successCallback );
  </code></pre>
  
  <p>It works well but this is calling a php page which does a database query so sometimes this might be slow and it lags a bit at times. I was wondering if there was a clean way to do a progress bar so when the use clicks on the top dropdown the progress bar appears so the user wont get the lag or worse a long wait time for db bottleneck</p>