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.

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

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

<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>

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

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

</script>

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

show ajax loader image while making ajax request with jquery