title: jquery preloader for div content only
body: <p>I'm building a WebSite and i want to show a preloader before the page is loaded and ready to display on the screen.</p>
  
  <p>I did found a lot of plugins to do that, but they only works when it's for the whole WebSite. I want to do that only when i load a content inside a specific ID Div. The problem i have is because the content of this div is called based on a menu click and the preloader doesn't work.</p>
  
  <p>This is my HTML for the page:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="head"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="service"&gt;Service&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact"&gt;Contato&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="ip-container" class="ip-container"&gt;
      &lt;!--some other codes in here --&gt;
  
      &lt;div id="content"&gt;&lt;!-- content ajax --&gt;
  
      &lt;/div&gt;&lt;!-- /content ajax --&gt;
  
  &lt;/div&gt;&lt;!-- /container --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I want to show the preloader only when the user click on the menu and the #content div is loaded with it's content.</p>
  
  <p>And this is the Jquery i'm using to call the content:</p>
  
  <pre><code>$(document).ready(function(){
  
      $('#content').load('content/home.php');
      $('.head').on( 'click', 'li a', function() {
  
          var page = $(this).attr('href');
          $('#content').load('content/' + page + '.php'); 
          return false;
      });
  });
  </code></pre>
  
  <p>How can i do this?</p>