title: How to show/hide loading wheel with javascript
body: <p>I have buttons on my site that load new content via ajax. I made a div to house a loading wheel for while the content is loading.  On the button click function, I have it first add a class to the div to make the loading wheel appear, then load the data, then remove the loading wheel class.  This doesn't seem to work. I don't see the loading wheel at all. I even tried making the js execution pause for a second before the loading wheel is removed, but i still don't see it.  See the jsfiddle for a working example: <a href="http://jsfiddle.net/g8np7qLa/" rel="nofollow noreferrer">http://jsfiddle.net/g8np7qLa/</a></p>
  
  <p>JS:</p>
  
  <pre><code>function wait(ms){
     var start = new Date().getTime();
     var end = start;
     while(end &lt; start + ms) {
       end = new Date().getTime();
    }
  }
  
  function show_loader(){
      $("#loader").addClass("loader");
  event.preventDefault();
  }
  
  
  function hide_loader(){
      $("#loader").removeClass("loader");
  event.preventDefault();
  }
  
  if($(".item-button").length) {
  
  
      $(".item-button").click(function(event) {
          show_loader();
  
      //load the ajax data
   wait(1000);
   hide_loader();
  
  event.preventDefault();
  
      });
  
  
  }
  </code></pre>