How to do this image is loading?

I was just going through this beautiful website. Can anybody tell me how that designer has shown "Th开发者_开发知识库e magic is loading" thing :

http://danielhellier.com/showcase/danielhellier/

The image just disappears as soon as the site is loaded complelely.

---

He is using javascript.

Look at the file http://danielhellier.com/showcase/danielhellier/js/jquery.bits.js

in the first line he fades out the loading div once the site has loaded:

$(window).load(function () {
    $('#loading').fadeOut('slow');
});

The loading div:

<div id="loading"> 
    <div align="center"> 
        <p>The magic is loading</p> 
        <img src="img/loader.gif" alt="Loader" /> 
    </div> 
</div> 

The CSS for the loading div:

#loading {
    background: none repeat scroll 0 0 #1E1E1E;
    color: #FFFFFF;
    cursor: wait;
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 100;
}

Notice how the z-index is high to put it on top of everything and the height and width are 100% to make it take up the entire window with its opaque background.

Also he put that <div> before the rest of the HTML. So it will be loaded first and the JavaScript to remove it is triggered by the load event on the window which will not be triggered until everything has loaded.

A very nice effect.