12 02 2008

How to build a Google like Ajax loader: the red loading... bar

by Daniel | hits(6236)

TAGS: php jQuery Ajax javascript CSS web 2.0

Well a lot of work lately but finally I found a bit of time to write a quick tutorial!!

This time we will build a Google like ajax loading red bar!

We will use jQuery and a bit of CSS to achieve this purpose!

jQuery is a lightweight Javascript framework that will help us in performing the Ajax call for our little demo.

Well the trick of a Google like ajax loading red bar is in the following lines of CSS:

/*AJAX LOADER
-------------------*/
#loading{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    background-color: red;
    font-size: 150%;
    color: white;
    padding: 2px;
}

The above code will make our "loading indicator" to stick in the top-left corner of the browser, and it will position it in the foreground.

In our page we will position a DIV element just before the closing body tag with id #loading and style="display: none;"

As you can notice we set the style to "display: none"!

Using a bit of Javascript we will bind the Ajax call event to the display of our Google like Ajax indicator:

$(document).ready(function()
{
    //-------------------------------------------------------
    /*shows the loading div every time we have an Ajax call*/
    $("#loading").bind("ajaxSend", function(){
           $(this).show();
     }).bind("ajaxComplete", function(){
           $(this).hide();
     });
     //-------------------------------------------------------
})

See it in action, check out the demo!

Further resources:

del.icio.us digg technorati blinklist furl reddit newsvine spurl yahoo fark

view/hide comments | add comment

Phelipe

2008-02-12 14:22:15

Nice one!

Thanks for this tutorial!

Phelipe

Sean

2008-02-16 06:53:44

Well, this is an okay beginning step, but the indicator should display at the top of the viewport, not the browser. Add a "return false;" on your demo link, make your browser small and scroll down before clicking -- you'll see what I mean. Also, many of the Google Apps are now using a centered yellow DIV.

Daniel

2008-02-16 10:10:50

@Phelipe
your welcome man!

@Sean
Cheers for the suggestion, this was a starting point. Everybody is free to refactor this example according to specific needs. In next tutorial I'll improve the exambple in order to add a loading image inside the red bar + position the red bar in the Ajax target div!

freakstyle

2008-02-25 14:22:55

Great Dan,
You can even put the "display:none" css rule in the css...
Cute intellighenzia affiliated
See you soon ;-)

Daniel

2008-02-26 09:24:25

@fede

Yep, cheers for the suggestion mate ;o)

Dan

hide comments | add comment

4webby BLOG

How to build a Google like Ajax loader: the red loading... bar

Tags