I choose to do it this way, this will cover for all Ajax actions on my site.
HTML
<div id="GlobalMsg">
<img src="~/loading.gif" /></div>
CSS
#GlobalMsg {
/*padding: 25%;*/
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 999999 !important;
display: block;
position: fixed;
top: 0px;
left: 0px;
}
jQuery
$('#GlobalMsg')
.hide()
.ajaxStart(function () {
$(this).show();
// Any other handling
})
.ajaxStop(function () {
$(this).hide();
// Any other handling
}).ajaxError(function (event, jqxhr, settings, exception) {
// Any other handling
});