Kode CSS /*loading*/
#loading{position:fixed;left:0;top:0;width:100%;height:100%;z-index:999;overflow:hiden;
background: rgb(10,8,9);background: -moz-linear-gradient(-45deg, rgba(10,8,9,1) 0%, rgba(10,14,10,1) 40%, rgba(110,119,116,1) 52%, rgba(0,0,0,1) 67%, rgba(0,0,0,1) 100%);background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(10,8,9,1)), color-stop(40%,rgba(10,14,10,1)), color-stop(52%,rgba(110,119,116,1)), color-stop(67%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1)));background: -webkit-linear-gradient(-45deg, rgba(10,8,9,1) 0%,rgba(10,14,10,1) 40%,rgba(110,119,116,1) 52%,rgba(0,0,0,1) 67%,rgba(0,0,0,1) 100%);background: -o-linear-gradient(-45deg, rgba(10,8,9,1) 0%,rgba(10,14,10,1) 40%,rgba(110,119,116,1) 52%,rgba(0,0,0,1) 67%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(10,8,9,1) 0%,rgba(10,14,10,1) 40%,rgba(110,119,116,1) 52%,rgba(0,0,0,1) 67%,rgba(0,0,0,1) 100%);background: linear-gradient(135deg, rgba(10,8,9,1) 0%,rgba(10,14,10,1) 40%,rgba(110,119,116,1) 52%,rgba(0,0,0,1) 67%,rgba(0,0,0,1) 100%);
}
.putar1{position:absolute;bottom:25%;left:34%;display:inline-block;background-color: rgba(0,0,0,0);border:5px solid #ddd;opacity:.9;border-top:5px solid rgba(0,0,0,0);border-bottom:5px solid rgba(0,0,0,0);border-radius:100%;box-shadow: 0 0 35px #ddd;width:auto;height:auto;-moz-animation:putar 4s infinite ease-in-out;-webkit-animation:putar 4s infinite linear;
}
.putar2{background-color: rgba(0,0,0,0);border:5px solid #ddd;opacity:.9;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-radius:350px;box-shadow: 0 0 15px #ddd;width:300px;height:300px;margin:5px;
-moz-animation:putardalam 1s infinite linear;-webkit-animation:putardalam 1s infinite linear;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-H0_zcFZcrg10tZuXHsTSQ1yrAllp7MhtbTsIK0DBk-SVBmPpepTF-DO3tWDyZexXTVHb2ImEsbvVaxeUj4dAiVt6YVhyphenhyphenL8L2VZgTStRp4f538MlZr6fWBErmhmDcmBUvQGchqS6HyJp/s1600/blogger-2.png) no-repeat center;
}
@-moz-keyframes putar{0% { -moz-transform:rotate(-120deg); opacity:0; box-shadow:0 0 1px #ddd;}30% { -moz-transform:rotate(420deg); opacity:1;}100% { -webkit-transform:rotate(-420deg); opacity:1;}
}
@-webkit-keyframes putar {0% { -webkit-transform:rotate(-120deg);opacity:0;box-shadow:0 0 1px #ddd;}30% { -webkit-transform:rotate(420deg);opacity:1;}100% { -webkit-transform:rotate(-420deg);opacity:1;}
}
@-moz-keyframes putardalam {0% { -moz-transform:rotate(-320deg);opacity:1;}100% { -moz-transform:rotate(0deg);opacity:1;}
}
@-webkit-keyframes putardalam{0% { -webkit-transform:rotate(-320deg);opacity:1;}100% { -webkit-transform:rotate(0deg);opacity:1;}
}
.waiting{position:fixed;bottom:5%;left:20%;font:100px Vivaldi;color:#585858;text-shadow:-1px 0 #ddd, 0 1px #ddd, 1px 0 #ddd, 0 -1px #ddd;border-bottom:2px solid #ddd;text-decoration:blink;
}
|
Kode HTML <body onload="init()"><div id="loading"> <div class="putar1"> <div class="putar2"> </div> </div> <span class="waiting">Please Wait...☹</span></div> <script src="https://sites.google.com/site/binkbenk77/loading.js"></script> |