display loading gif in specific a div while ajax loading

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>

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>