title: How do I show/hide a div with a progress bar using ajaxStart and ajaxStop?
body: <p>I'm very new when it comes to programming so maybe this is a walk in the park for you guys.
  I want to create a div with a .gif-image of a progress bar, where the div should only be shown when pressing a button to for example save some settings to the database.</p>
  
  <p>This function is going to be used everywhere in the GUI and every time one a query is made towards the database. I'm coding with jQuery UI and I've been recommended to use ajaxStart() and ajaxStop(), but can't quite figure out how to use it properly. The code below is just some code I wrote thinking I would be on the right track somehow, but most likely not.</p>
  
  <p>----- Script -----</p>
  
  <pre><code>$(document).ready(function(){
        $("#progressContainer").ajaxStart(function(){
          $(this).html("&lt;img src='ajax-progressbar.gif' /&gt;");
        });
        $(".clickForProgressBar").click(function(){
          $("#progressContainer").load("");
        });
      });
  </code></pre>
  
  <p>----- HTML -----</p>
  
  <pre><code>&lt;button class="clickForProgressBar"&gt;Click here&lt;/button&gt;
  &lt;div id="progressContainer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>If someone could try and give me some tips on how to proceed I would be forever grateful.
  If you at all could understand what I meant to begin with ;)</p>