Grow your CSS skills. Land your dream job.

CSS Page Loader

Published by Chris Coyier

If you have certain pages on your website that take some time to load, you may want to consider a page loader. A page loader is any kind of animation that visually communicates to a visitor that the page is loading and to just sit tight for a few seconds. Without a page loader, a visitor might think your site is being unresponsive and just click away in frustration. A page loader also provides a small distraction which can actually makes the wait seem much shorter.

If your page loading delay is caused by something like a database read, it is likely that the visitor remains on the current page until the page they are trying to go to is loaded. This is different than a page loading delay like large images, where the visitor would get to the page before the delays. It is the former scenario where a CSS page loader can work very well. Here is how you do it:

  • Create a DIV with your page loader in it. This could be a little animated GIF or maybe a SWF flash animation.
  • In your CSS, position this DIV right where you need it. It could be placed over the main content, or you could do a full-screen white-out like so:
    div#page_loader {
      position: absolute;
      top: 0;
      bottom: 0%;
      left: 0;
      right: 0%;
      background-color: white;
      z-index: 99;
    }
  • Add this DIV to every page on your website that links to the page you need a loader for. Then make sure to add display: none; to your CSS for this DIV, this will make it not show up at all on these pages under normal circumstances.
  • A touch of javascript is needed to toggle the display property of that DIV. This javascript put into every linked element that links to the slow loading page. Like so:
    <a onclick="javascript:document.getElementById('page_loader').style.display='block';" href="slowpage.html">Slow Page</a>

Clicking that link will trigger the javascript to set the display of the DIV to "block", instantly revealing it. This will be visible to the visitor until the slow loading page is loaded, then they will be moved there.

Update: There is a new post post including an example here.

Comments

  1. Romz
    Permalink to comment#

    Maybe I’m a bit boring but what do you think about this :

     

    div#page_loader {
      display: block;
      …
    }

     

    Then in your <head> tag you have to put :

     

    <head onLoad=”function(){
    document.getElementById(‘page_loader’).style.display=’none';
    }”>

    And you will no longer need to declare an onclick event on pages you want to show your loader, it will do it automatically.

  2. I think I am just a bit confused…

    How does putting the display toggle in the header help? The tutorial assumes that you won’t want to put the page loader on every single anchor element, just the one (or several) that need it.

  3. Permalink to comment#

    WOW.
    Thats interesting!

  4. Romz
    Permalink to comment#

    Hello(again) Chris and thank you for the correction of my precedent reply.

    I made a mistake again so instead potting javascript code into the “head” tag, put it into the “body” one ;-)

    I agree with your idea of showing only a loader on slow pages, but how could you know which are slow? It depends of too much factor to predict it I think.

    The solution I propose is simple and works with all pages, we could also imagine to set a sort of timer and if the page is not loaded into this time, we show the loader.

    Anyway, it’s a great post don’t get me wrong ;-)

  5. admin
    Permalink to comment#

    Yeah, you are right that if you are unable to tell which of your pages are loading slowly, your way is the way to go.

     

    I actually wrote this post because of a site I was working on. It was just one particular page that has a big database call on it that was causing the slow page load and this solution worked perfectly for it. You’re way is much simpler :)

  6. Permalink to comment#

    a little bit confused. can u make demo so i can downlaod it.thanks alot

  7. Permalink to comment#

    I can’t really make a downloadable example because the type of slow page load I am talking about comes from a slow database or a large database call. I can’t really include a database in a download. Maybe I can fake it somehow. Or I could try to put up an example page on this site, but I’m hesitant to do that since if any number of people use it, it could seriously impact the sites performance. Stay posted.

  8. Permalink to comment#

    it do not work to me or i miss something.
    maybe i need an example.

  9. Permalink to comment#

    @delang: I posted a new article on this, with a link to an example page here

  10. Permalink to comment#

    thanks m8.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".