How do I give the user a progress bar
<p>I have this <a href="http://posnation.com/pre_config/step3/Quick/1" rel="nofollow">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>
