Skip to navigation

Full Screen Javascript Load Page

This loading screen is a full-screen version of my original JavaScript loading screen. The only difference between this loading screen and the original is the CSS.

Click here to preview the full-screen loader

Step One

First, grab the XHTML and JavaScript from my original page loader. Then, just use the below CSS. Once again: use the HTML and JavaScript found here, and then use the below CSS.

The CSS

Put this code inside the head tag:

<style type="text/css">
  /*this must be set so that the loading div
    can be height:100% */
  body{height:100%}

  /*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 at the very top-left corner*/
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;

    /*in supporting browsers, make it
      a little transparent*/
    background:#fff;
    _background:none; /*this line removes the background in IE*/
    opacity:.75;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;

    /*set the padding, so that the content
      of the div is centered vertically*/
    padding-top:25%;
  }
</style>

This CSS makes the loading div fill the entire screen, and it centers the content of the div.

Now, just grab the XHTML and JavaScript here, and you'll be finished!

CSS Walkthrough

Now let's do a breif walkthrough of this simple CSS.

body{height:100%}

The height of body must be set to 100%. If it is not, setting the heigh of our div to 100% will not work.

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

This positions our div at the very top-left of the page, and sets the height and width to 100%. This makes the div fill the screen.

opacity:.75;

This makes the div a little bit transparent. However, this does not work in Internet Explorer, so we must use the following fix:

background:#fff;
_background:none;

The first line sets the background to white. But since opacity doesn't work in IE, this means that the white div will cover the whole page and everything will be hidden. The second line is only read by IE, and it removes the background.

More Questions?

As always, if you have any more questions, please email me. I am always glad to answer questions and work on custom scripts.