show ajax loader image while making ajax request with jquery


You will need an image, first. Go to ajaxload.info and get one you like.

Put the html for the loader in the page.

[sourcecode language="html"]
<div id="spinner">
<img src="/jobadmanager/Content/images/ajax-loader-big.gif" alt="Loading..."/>
</div>
[/sourcecode]

Style the div element to position it on the centre of the browser.

[sourcecode language="css"]
<style>
div#spinner
{
display: none;
width:100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
text-align:center;
margin-left: -50px;
margin-top: -100px;
z-index:2;
overflow: auto;
}
</style>
[/sourcecode]

Now, use javascript to fade it in and out, when an ajax request starts.

[sourcecode language="javascript"]
<script type="text/javascript">
$('#spinner').ajaxStart(function () {
$(this).fadeIn('fast');
}).ajaxStop(function () {
$(this).stop().fadeOut('fast');
});

</script>
[/sourcecode]

Reference: http://stackoverflow.com/questions/807408/showing-loading-animation-in-center-of-page-while-making-a-call-to-action-method