Loading Screen on your Website

Make a loading screen by attaching a GIF on your DIV
Place this on your 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 it 200px down the screen*/

        position: absolute;

        top: 200px;

        left: 0;

        width: 100%;

        text-align: center;

        /*in supporting browsers, make it a little transparent*/

        background: #fff;

        filter: alpha(opacity=75); /* internet explorer */

        -khtml-opacity: 0.75; /* khtml, old safari */

        -moz-opacity: 0.75; /* mozilla, netscape */

        opacity: 0.75; /* fx, safari, opera */

        border-top: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

    }

</style>

Source
http://andrewpeace.com/javascript-css-loading-screen.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s