display loading gif in specific a div while ajax loading

Question

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?

<div class="row">
    <div class="col-lg-12 div-Detailed-Report">
    //some content
    </div>
</div>

<div class="row">
    <div class="col-lg-12 div-Summary-Report">
    //some content
    </div>
</div>

<style type="text/css">
.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;
}
</style>

<script>
$(document).ready(function () {
        $(document).ajaxStart(function () {
            $(".se-pre-con").show();
        }).ajaxStop(function () {
            $(".se-pre-con").hide();
        });
});

//some ajax function
</script>

Answer 1

This is would solve your problem. Place loading gif inside div hidden and when ajax starts show gif and when ajax complete hide gif again.

<div class="row">
   <div class="col-lg-12 div-Summary-Report">
       <img src="loading.gif" class="loading">
   //some content
   </div>
 </div>

 <style type="text/css"> 
    .loading{display:none;}
 </style>