Search code examples
javascriptloader

How to show CSS loader while page is loading?

I'm trying to get a CSS loader showing up on the website while content is loading. I'm using this tool to create the loader: http://cssload.net/

Some of my pages do have a lot of tabs and the content has to be loaded before the user can interact with the website. I don't know what I have to look for to get this loader showing up.

I think I have to use the .onload() JavaScript?

Solution

  • You need to toggle the visibility of that image tag which contains the gif. Just simply show the image initially and when the page is loaded, hide the image.

    Sample demo: http://jsfiddle.net/GCu2D/140/

    $(document).ready(function () {
    $('a').click(function(){
        $('img').toggle();
        return false;
    })
});

    This is a jQuery code, although you can do the same in javascript. by setting display to none or block accordingly.