Grow your CSS skills. Land your dream job.

CSS Page Loader Example

Published by Chris Coyier

Reader Delang was having trouble with the CSS Page Loader concept I posted a while ago. So I went and made up an example page. It's very simple, and it just "fakes" actually loading something. As in, it's not actually loading anything. You will have to refresh the page to reset it.

csspageloadexample.png

If you missed it before, the point is that you can make a DIV that covers the entire screen in white with an animated page loader in it with it's display property set to none:

#page-loader {
  position: absolute;
  top: 0;
  bottom: 0%;
  left: 0;
  right: 0%;
  background-color: white;
  z-index: 99;
  display: none;
  text-align: center;
  width: 100%;
  padding-top: 25px;
}

Then you can toggle the display of that DIV with a snip of javascript in the onclick parameter of an anchor element:

<a href="#" onclick="javascript:document.getElementById('page-loader').style.display='block';">Click here</a>

Comments

  1. Patrick Kwinten
    Permalink to comment#

    a page loader that is not actually loading is like a car which you can drive in… or?

  2. Permalink to comment#

    this is nice example, but is not working nice with ie6, DIV is not covering whole page.

  3. I like this fake loading page. But if you use the back button some browser show the loading div without the click (e.g. Safari). Any idea how to fix this?

  4. @Stefan, if this is used in actual product, I don’t think you will see this problem, as the back button will cause a fresh load of the page and it will be hidden again. The problem now is that no new page is actually being loaded.

  5. Gandheera
    Permalink to comment#

    its very simple. i like it. but i will not use it. because, using back button in firefox show the loading div without the click. please fix this problem.

  6. sam
    Permalink to comment#

    where do i place the Java?
    Thanks

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".