CSS-Tricks Example

Page Load Light Box

By CSS-Tricks


Click here to activate.


When the link above is clicked, a small bit of javascript toggles the display property of a white box that covers the entire browser window from none to block. The white box is a DIV defined in the CSS giving it the full-screen size. Within that DIV is the animated GIF page loader.

This page loader technique works well for specific pages on a website that have slow load times, such as big database calls. This technique doesn't work so well for page that have slow load times because they have a lot of images on them or something like that. This loader only displays while the browser is loading up a new page and the visitors stays on the current page, not pages where you go to the new page right away, and it takes a while to load. There is a difference there =).

Loading page...

loader

...nothing is actually loading, this is just an example. Reload the page to get back.


Note that this is still the same page, you have not moved pages.