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
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(){ $('.
').css("visibility", "hidden"); } }); }
loading