Page Loading Overlay

a simple vanilla js loading layer for page load.


1. html

Add a layer element on top of the body-tag. The layer is invisible by the css-class "hidden". If the Browser support javascript, the script-block directly after the layer set the layer visible.

<div id="loadingscreen" class="hidden"></div>
<script type="text/javascript"> document.getElementById("loadingscreen").classList.remove("hidden")

2. Script

add a js-file or a script-block at the end of the page, witch hide the layer after page is loading.

<script type="text/javascript">
window.addEventListener( 'load', onPageLoaded, false );
window.addEventListener("pageshow", onPageShown, false);

/* special event handler for ios Safari */
function onPageShown(evt) {
    // check if the page has been loaded from cache entirely
    if (evt.persisted) {
        // emulate the page loaded event

function onPageLoaded() {

3. Optionals

Add optioal a Cancel link in the Layer with this click function to cancel manual the load animation

document.querySelector(".cancel").addEventListener('click', cancelLoading);

function cancelLoading(event) {

     // go on with what we have loaded by now

add optional the loading screen to link click events. Example.
This make only a sense if you use a translation effect to show the layer.

<script type="text/javascript">
document.querySelector("a.showLoadingScreen").addEventListener('click', showLoadingScreen);

function showLoadingScreen(event) {
    /* show the loading overlay if the user clicks on certain links without pressing ctrl-, alt-, shift- or cmd-key at the same time */
    if ((event.ctrlKey || event.altKey || event.shiftKey || event.metaKey))

    // hide the cancel button

    //show layer

Add the loading screen to ajax calls (jQuery for example).

<script type="text/javascript">

Example content

These external images cause the page to load a bit longer and you can see the layer on this page.