Skip to content

Javascript Loading Screen

This script uses CSS and Javascript to display a div while the page is loading. The div can contain an animated loading GIF, or just text. It works in all browsers (in those that do not support JavaScript, the loading screen simply does not appear).

[Loading Screen] Options

Credits

By Andrew Peace.

Javascript/CSS Loading Div

This script uses both Javascript and CSS to display a loading screen that disappears after the page has finished loading. You can use CSS to customize the loading screen div as much as you want. It works in all browsers, including FireFox and InternetExplorer.

Click here to preview the loading page

The CSS

Place this code in the head tag:

<style type="text/css">
  /*this is what we want the div to look like
    when it is not showing*/
  div.loading-invisible{
    /*make invisible*/
    display:none;
  }

  /*this is what we want the div to look like
    when it IS showing*/
  div.loading-visible{
    /*make visible*/
    display:block;

    /*position it 200px down the screen*/
    position:absolute;
    top:200px;
    left:0;
    width:100%;
    text-align:center;

    /*in supporting browsers, make it
      a little transparent*/
    background:#fff;
    opacity:.75;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
  }
</style>

You can customize this CSS however you want. Just make sure that in loading-invisible it is set to display:none and in loading-visible it is set to display:block. This CSS should be modified if you want the loading screen to be full screen, vertically centered, or positioned in the top-right corner.

The XHTML

Place this code right at the top of the body tag:

<div id="loading" class="loading-invisible">
  <p>Your content (like a loading GIF)</p>
</div>

Inside of the div, you can put anything you'd like, including any kind of animated GIF.

The JavaScript

Now here is the fun part! Put this code right after the loading div:

<script type="text/javascript">
  document.getElementById("loading").className = "loading-visible";
  window.onload=function(){
    document.getElementById("loading").className = "loading-invisible";
  }
</script>

You are done!

JavaScript Walkthrough

Now that your loading screen is working, let's walk through the simple JavaScript to see how it works.

document.getElementById("loading").className = "loading-visible";

This line changes the class of the loading div from loading-invisible to loading-visible. So, why didn't we just make the div visible in the first place? Because if the user does not have JavaScript enabled, JavaScript will never be able to make the div invisible. Thus, the div should only become visible if our script is actually running.

window.onload=function(){
  document.getElementById("loading").className = "loading-invisible";
}

This part makes it so that when the window has finished loading, the div becomes invisible again. Specifically, it is setting window.onload to a new function which contains the line:

document.getElementById("loading").className = "loading-invisible";

This particular line changes the class of the loading div to loading-invisible.

Code Explanation Overview

So, basically, here is what all this code does.

A hidden loading div is created with some content, like an animated GIF. Then, JavaScript unhides the div. When the page has finished loading, JavaScript hides the div again.

If you have any questions, please just contact me. I usually respond within a day, and if I like your question I will post it online.