Center Screen Javascript Load Page
   
This loading screen is an alternate version of my original JavaScript loading
screen (URL: javascript-css-loading-screen.html). The only difference between
this loading screen and the original is the CSS.

   
Click here to preview this loading div (URL: loading-screen-center-screen.html)

   
Step One
   
First, grab the XHTML and JavaScript from my original page loader (URL:
javascript-css-loading-screen.html#html). Then, just use the below CSS. Once
again: use the HTML and JavaScript found here (URL:
javascript-css-loading-screen.html#html), and then use the below CSS.

   
The CSS
   
Put this code inside 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;

  /*set the div in the center of the screen*/
  position:absolute;
  top:50%;
  left:45%;
  width:350px;
}
</style>


   
This CSS positions the loading div at the very center of the screen.
   
Now, just grab the XHTML and JavaScript here (URL:
javascript-css-loading-screen.html#html), and you'll be finished!
   
CSS Walkthrough
   
Now, let's walk through this simple CSS.


position:absolute;
top:50%;
left:45%;

   
This part of the CSS is what positions the loading div at the center of the
screen. By setting top:50%, the div goes halfway down the page.
   
So, it would follow that we should set left:50%. However, if we do this, the
left side of the div would be halfway across the screen. So, we estimate a bit,
and set left:45%, so that the center of the div will be about halfway across the
screen.

   
More Questions?
   
As always, if you have any more questions, please email me (URL: contact.html).
I am always glad to answer questions and work on custom scripts.