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


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