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>
a page loader that is not actually loading is like a car which you can drive in… or?
this is nice example, but is not working nice with ie6, DIV is not covering whole page.
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?
@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.
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.
where do i place the Java?
Thanks