title: loading animation using jquery to display inside a particular div
body: <p>I am displaying a loading icon using jQuery whenever an ajax call takes place as below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$body = $("body");
  $(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
    ajaxStop: function() { $body.removeClass("loading"); }    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
      url('http://i.stack.imgur.com/FhHRx.gif') 
      50% 50% 
      no-repeat;
  }
  body.loading {
    overflow: hidden;   
  }
  body.loading .modal {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="modal"&gt;&lt;!-- Place at bottom of page --&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is loading fine whenever an ajax takes place, but its obvious the loading icon would be displaying in the body hiding the UI at the back. Instead of that I want to display the loading only inside that particular div. In the attached html file i want to make the loading display only inside the </p>
  
  <pre><code>"div id= box1"
  </code></pre>
  
  <p><a href="http://pastebin.com/tr1sSDm2" rel="nofollow"><strong>Link to HTML File</strong></a></p>