CSS Page Loader

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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.