Loading gif image for freeze page to process ajax request in jquery

The method is use to show some animated image at time of processing the ajax request with gif image. where we have to use beforeSend object in ajax call for loading gif at time of request processing.

Your ajax function looks like 

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function(){
        // show gif image when request sent
    },
    complete: function(){
        // hide gif image when response receives
    },
    success: function(html){
       // final output hadleling
    }
});

Html Code:

<div class="loading">
  <img src="//image path" class="img-responsive" />
</div> 

Styling CSS Code:

.loading {
  visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  z-index: +100 !important;
  width: 100%;
  height:100%;
}

.loading img {
  position: relative;
  top:50%;
  left:50%;
}

Jquery Code: 

$.ajax({
  type:'POST',
  beforeSend: function(){
    $('.loading').css("visibility", "visible");
  },
  url:'/quantityPlus',
  data: {
   'data1':p1,
   'data2':p2,
   'data3':p3},
   success:function(data){
     // data fetch and show on html page
  },
  complete: function(){
    $('.loading').css("visibility", "hidden");
  }
});

}