Coding-Spot

You are not connected. Please login or register

 
 
 

how to put loading when click on other link

Message (Page 1 of 1)

#1

Hyun-X

Hyun-X
 
New Member

Posted July 6th 2013, 5:48 pm

 
idont know where is the exact section of my problem

but i got this codes

Code:
<div class="circle"></div><div class="circle1"></div>
<style>.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-right: 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: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 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: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}

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

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

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    };
}

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

    100% {
        -webkit-transform: rotate(360deg);
    };
}</style>
<script>
document.write('<div id="loading_wrapper" style="display:none;"></div><style>#loading_wrapper{background: #95C715 url(http://community.invisionpower.com/filestore/public/style_images/master/ajax_loading.gif) 50% 40% no-repeat; border:1px solid #7BA60D;color:#fff;text-align:center;padding:5px 0 8px;width:8%;height: 2%;top:0%;left:46%;-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;border-radius:0 0 5px 5px;position:fixed;-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.2),inset 0px -1px 0px rgba(255,255,255,0.2);-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.2),inset 0px -1px 0px rgba(255,255,255,0.2);box-shadow:0px 3px 5px rgba(0,0,0,0.2),inset 0px -1px 0px rgba(255,255,255,0.2);}</style>');
$("#loading_wrapper").fadeIn(1500);
window.onload=function(){$("#loading_wrapper").fadeOut(1500);};
</script>





#2

refresh101

refresh101
 
Advance Member

Posted July 7th 2013, 2:44 pm

 
Put This At The Beginning Of The Codes
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>

Or You May Copy The Whole Code
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>


TADAAAAAAA

You May Put It In OverAll_Header , HomePage Message Anywhere That Can Be Putted In HTML.


-Bangaa Mu HTML Sa Buang Hahahahha Julsin.





#3

Hyun-X

Hyun-X
 
New Member

Posted July 7th 2013, 5:54 pm

 
asa ni e butang uie james





#4

tommycoo

tommycoo
 
CS Staff
CS Staff

Posted July 23rd 2013, 6:01 am

 
Hyun-X wrote:asa ni e butang uie james

because this is an english forum, so please speak english :)



http://atlanta.forumid.net/


#5

Mark

Mark
 
Administrator
Administrator

Posted August 3rd 2013, 6:27 pm

 
~ Topic answered
~ Old Thread. No Reply. Locked.



https://coding-spot.darkbb.com


#6

Sponsored content


 

Posted

 





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