Ajax Loading GIF

So you want a little funky AJAX loader?

Add this to your JS main core file…:

$(document).ready(function() {
    //initiate an ajax start message
    $(document).ajaxStart(function() {
       //show the message
       $('#ajax_loading_indicator').show();
    });
    //when ajax is completed
    $(document).ajaxStop(function() {
       //hide the message
       $('#ajax_loading_indicator').hide();
    });
});

And create a nice little div somewhere:

<div id="ajax_loading_indicator">
    <img src="/public/images/ajax_loading.gif" alt="Loading" />
    PLEASE WAIT
</div>

I use the following CSS to style mine, so its unobtrusive but visible:

#ajax_loading_indicator {
    position: fixed;
    right: 2px;
    top: 2px;
    background-color: #efec9f;
    border: 1pt orange solid;
    padding: 5px 30px 5px 30px;
    display: none;
}

TIP: If you can’t be bothered to find an AJAX loading GIF, then there is a great little website that will create you one for free. Its, www.ajaxload.info

Easy!

You do need to have jQuery (version 1.0+) for this, in case you didn’t work that out… www.jquery.com

 

 

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>