-> You can use ajaxStart() and ajaxStop() Methods for it.
– The ajaxStart() method executes before the AJAX request is being sent/starts.
– The ajaxStop() method executes on/after completion the the AJAX request. If there are no outstanding Ajax requests remain then it triggers the ajaxStop event.

Below is an example of it.
-> First define Div with image tag.
<div id=”loaderDiv”>
<img src=”loaderImage.gif” />
</div>

-> Define script as below, We need to first hide it also. as we only need to display it on ajax request.
<script>
$(‘#loaderDiv’).hide();
$(document)
.ajaxStart(function () {
//show the loading image on ajax request sent.
$(‘#loaderDiv’).show();
})
.ajaxStop(function () {
//hide the loading image when got response.
$(‘#loaderDiv’).hide();
});
</script>
-> I hope it will be helpful for you.