title: display loading gif in specific a div while ajax loading
body: <p>below codes are to display loading gif while ajax is loading data. The codes below displaying the gif for the whole page of my browser. But I want it to display only at div-Summary-Report. Is it able to do this?</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-12 div-Detailed-Report"&gt;
      //some content
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-lg-12 div-Summary-Report"&gt;
      //some content
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style type="text/css"&gt;
  .no-js #loader { display: none;  }
  .js #loader { display: block; position: absolute; left: 100px; top: 0; }
  .se-pre-con {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url('../../Content/kendoui/Bootstrap/loading_2x.gif') center no-repeat #fff;
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  $(document).ready(function () {
          $(document).ajaxStart(function () {
              $(".se-pre-con").show();
          }).ajaxStop(function () {
              $(".se-pre-con").hide();
          });
  });
  
  //some ajax function
  &lt;/script&gt;
  </code></pre>