CSS Page Loader Example
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.
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>
Loading ...
1
a page loader that is not actually loading is like a car which you can drive in… or?
Comment by Patrick Kwinten — September 30, 2007 @ 11:41 am
2
this is nice example, but is not working nice with ie6, DIV is not covering whole page.
Comment by apex — March 8, 2008 @ 7:09 am
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?
Comment by Stefan — June 30, 2008 @ 7:52 am
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.
Comment by Chris Coyier — June 30, 2008 @ 8:21 am