CSS Page Loader Example

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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>