First choose a gif of your taste:
this site has some many good: http://ajaxload.info/
Now, let’s set up:
put the modal in HTML (this is the element that will appear on the screen with "loading..."):
<div class="modal"></div>
We will apply the appropriate styles in modal by CSS
.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;
}
/* enquanto estiver carregando, o scroll da página estará desativado */
body.loading {
overflow: hidden;
}
/* a partir do momento em que o body estiver com a classe loading, o modal aparecerá */
body.loading .modal {
display: block;
}
and in Jquery you use this way:
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
or in your case:
$body.addClass("loading");
$.ajax({
url: url + "login/ajaxLogin",
type: "POST",
data: $('#login_form').serialize(),
success: function(result) {
$body.removeClass("loading");
alert(result);
}
});
return false;
Source: https://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation
What would that look like if it were adapted to my code?
– misakie
The lake complemented it. Just a caveat about his response: filling the entire screen across AJAX will not produce a good user experience if you have multiple AJAX requests
– Joaquim Magalhães