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

10 thoughts on “show ajax loader image while making ajax request with jquery

  1. Ian says:

    I’m new to this, it didnt work forme, where exactly do you put the script part? I put it right after my “xmlhttp.open” request

    Was I supposed to split it up or something? – thanks

    $(‘#spinner’).ajaxStart(function () {
    $(this).fadeIn(‘fast’);
    }).ajaxStop(function () {
    $(this).stop().fadeOut(‘fast’);
    });

  2. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.

    I’ve been looking for a plug-in like this for quite some time and was hoping
    maybe you would have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading
    your blog and I look forward to your new updates.

  3. Have you ever thought about adding a little bit
    more than just your articles? I mean, what you say
    is important and everything. Nevertheless think about if you added some great photos or video clips to give your posts more, “pop”!
    Your content is excellent but with images and clips, this blog could certainly be one of the best in its niche.
    Excellent blog!

  4. Very great post. I simply stumbled upoin yiur blog and wanted to mention that I have truly loved surfing
    around your blog posts. In any case I wikll be subscribing on your rss
    feed and I’m hoping you write again very soon!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s