Loading Animation Using Jquery To Display Inside A Particular Div

I am displaying a loading icon using jQuery whenever an ajax call takes place as below: This is loading fine whenever an ajax takes place, but its obvious the loading icon would b

Solution 1:

The comment by vijayP is the right direction.

The CSS has to be modified since you have limited the loading class to only the body element.

.loading {
   overflow: hidden;   
}
.loading.modal {
   display: block;
}

Then in the JavaScript:

$(document).on({
  ajaxStart: function() { $("#box1").addClass("loading");    },
  ajaxStop:  function() { $("#box1").removeClass("loading"); }    
});

Solution 2:

I have edited your code a bit and i hope that will get you going for now.

$body = $("body");
$(document).on({
  ajaxStart: function() { $body.addClass("loading");    },
  ajaxStop: function() { $body.removeClass("loading"); }    
});

.modal {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  /*background: rgba( 255, 255, 255, .8 ) 
    url('http://i.stack.imgur.com/FhHRx.gif') 
    50% 50% 
    no-repeat;*/
}
body.loading {
  overflow: hidden;   
}
body.loading.modal {
  display: block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="modal"><imgsrc="http://i.stack.imgur.com/FhHRx.gif" /><!-- Place at bottom of page --></div>