12 02 2008

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

by Daniel | hits(40403)

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

Rumana Akter

2010-08-05 13:52:38

A few years back, because of the lack of technology, search engines bypass sites that use an Ajax dashboard. Search engines were not programmed to detect java scripts and thus SEO bots do not list them in the search results, instead they only show crawl-able static websites.

Ahmet Sali

2010-11-10 00:50:13

woow, this is really practical, i liked it, thanks :)

bobby

2011-03-04 11:46:25

how could this load a unique url everytime? say i loaded http://google.com and on google.com i clicked on http://google.com/images, how could i load any url on my domain using this script?

hide comments | add comment

4webby BLOG

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

Tags