Top-right Corner Loading Div
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.