Coding-Spot

You are not connected. Please login or register

 
 

Put A Loading Screen?

Message (Page 1 of 1)


 
Advance Member

Posted on Thu May 09, 2013 2:10 am

 
Hello Anyone Know How To Put A Loading Screen Like Mostone's Website? Thank You In Advance javascript:emoticonp(':D:')



View user profile



 
Senior Member

Posted on Thu May 09, 2013 3:27 am

 
try this,

put in your announcement HTML or generalities homepage :D:

Code:
        <center><script language="JavaScript">document.write('<div id="loading_wrapper"><div id="loading" ><font style="font-family: Verdana;" size="5" weight="bold">Waiting for Loading</font><br><br><div class="ball"></div><div class="ball1"></div></div></div>');window.onload=function() {document.getElementById("loading_wrapper").style.display="none";}</script></center><style>
            #loading_wrapper{
              position:fixed;
              left:0px;
              top:0px;
              width:100%;
              height:100%;
              background:rgba(0,0,0,0.7);
    z-index:9999999;
            }
            #loading {
            color: #FFF;
            font-size: 18px;
            font-weight: 700;
            left: 40%;
            position: fixed;
            top: 50%;

            }
    .ball {
        background-color: rgba(0,0,0,0);
        border: 5px solid rgba(0,183,229,0.9);
        opacity: .9;
        border-top: 5px solid rgba(0,0,0,0);
        border-left: 5px solid rgba(0,0,0,0);
        border-radius: 50px;
        box-shadow: 0 0 35px #2187e7;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        -moz-animation: spin .5s infinite linear;
        -webkit-animation: spin .5s infinite linear;
    }

    .ball1 {
        background-color: rgba(0,0,0,0);
        border: 5px solid rgba(0,183,229,0.9);
        opacity: .9;
        border-top: 5px solid rgba(0,0,0,0);
        border-left: 5px solid rgba(0,0,0,0);
        border-radius: 50px;
        box-shadow: 0 0 15px #2187e7;
        width: 30px;
        height: 30px;
        margin: 0 auto;
        position: relative;
        top: -50px;
        -moz-animation: spinoff .5s infinite linear;
        -webkit-animation: spinoff .5s infinite linear;
    }

    @-moz-keyframes spin {
        0% {
            -moz-transform: rotate(0deg);
        }

        100% {
            -moz-transform: rotate(360deg);
        };
    }

    @-moz-keyframes spinoff {
        0% {
            -moz-transform: rotate(0deg);
        }

        100% {
            -moz-transform: rotate(-360deg);
        };
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        };
    }

    @-webkit-keyframes spinoff {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(-360deg);
        };
    }</style>

tadaaaa :):



View user profile



 
Advance Member

Posted on Thu May 09, 2013 3:30 am

 
Thank You MOStone Youre So God Hehe ;D BTW Thanks



View user profile



 
Administrator
Administrator

Posted on Thu May 09, 2013 4:00 am

 
Since the problem is solved, i'll locked this and move to archive section. :D:
~ Locked and Moved



View user profile http://coding-spot.darkbb.com


#5

Sponsored content


 

Posted Today at 2:27 pm

 





Message (Page 1 of 1)

Permissions in this forum:
You cannot reply to topics in this forum

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None