Skip to navigation

Top-Right Corner Javascript Loader

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;

    /*position the div at the very top-right corner*/
    position:absolute;
    top:0;
    right:0;

    /*add some color and styling*/
    background:#006;
    color:#fff;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    height:1em;
  }

  /*make sure the paragraph inside the div
    isn't too tall*/
  div.loading-visible p{
    margin:0;
    padding:0;
    padding-right:25px;
  }
</style>

This CSS positions the loading div at the very top-right of the screen.

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.

position:absolute;
top:0;
right:0;

This part of the CSS positions the loading div at the top-right corner of the screen. By setting right:0, the div will be zero pixels from the right side of the screen.

height:1em;

This line sets the height of the div to 1em, which equals one line of text. This can be changed if you want to have more than one line of text in the div.

div.loading-visible p{
  margin:0;
  padding:0;
  padding-right:25px;
}

This part of the CSS makes the paragraph tag inside the div only as high as one line of text. It also adds some space to the right of the text.

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.