Saturday, 21 December 2013

Loading Before Page Load using css.

<html>
<script language="javascript" type="text/javascript">
    $(window).load(function () {
        $(".loader").fadeOut("slow");
    });  
</script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.loader2{  
z-index: 10010;     position: fixed;     padding: 0px;     margin: 0px;     width: 30%;     top: 40%;     left: 35%;     text-align: center;     color: rgb(0, 0, 0);     border: 0px solid rgb(170, 170, 170);     cursor: wait;
}
.loader-bg-color
{
z-index: 9999; border: medium none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.6; cursor: wait; position: fixed;}
#bowl_ringG{position:absolute;width:50px;height:50px;border:4px solid #908B91;-moz-border-radius:50px;-webkit-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px;left:50%;
}
.ball_holderG
{
position:absolute;width:13px;height:50px;left:18px;top:0px;-moz-animation-name:ball_moveG;-moz-animation-duration:0.8s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-webkit-animation-name:ball_moveG;-webkit-animation-duration:0.8s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-ms-animation-name:ball_moveG;-ms-animation-duration:0.8s;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;-o-animation-name:ball_moveG;-o-animation-duration:0.8s;-o-animation-iteration-count:infinite;-o-animation-timing-function:linear;animation-name:ball_moveG;animation-duration:0.8s;animation-iteration-count:infinite;animation-timing-function:linear;
}
.ballG
{
position:absolute;left:0px;top:-12px;width:20px;height:20px;background:#FF9933;-moz-border-radius:17px;-webkit-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;border-radius:17px;
}

@-moz-keyframes ball_moveG{
    0%{-moz-transform:rotate(0deg)}
    1000%{-mo0z-transform:rotate(360deg)}
}

@-webkit-keyframes ball_moveG{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}

@-ms-keyframes ball_moveG{
    0%{-ms-transform:rotate(0deg)}
    100%{-ms-transform:rotate(360deg)}
}

@-o-keyframes ball_moveG{
    0%{-o-transform:rotate(0deg)}
    100%{-o-transform:rotate(360deg)}
}

@keyframes ball_moveG{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}



</style>
<body>
    <div class="loader">
        <div class="loader-bg-color">
        </div>
        <div class="loader2">
            <div id="bowl_ringG">
                <div class="ball_holderG">
                    <div class="ballG">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>