Skip to navigation

Center Screen Javascript Load Page

This loading screen is an alternate version of my original JavaScript loading screen. The only difference between this loading screen and the original is the CSS.

Click here to preview this loading div

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 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, 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. I am always glad to answer questions and work on custom scripts.