✔ Animasi Loading Blog Dengan Css dan Gambar
"Loading Blog"
Pada kesempatan kali ini saya akan berbagi tips simple untuk mempercantik loading blog dengan animasi (gambar) loading. Oke sobat silahkan dibaca tips yang singkat ini, dan kalau mau lihat demonya silahkan direfresh (diloading sekali lagi) pada postingan ini.(source : mbah google)
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/AVvXsEgd3_HaeUKBb2rOa8AHJZhva4enkmWk7KrUMO_IgKlyI-5DDb0Hnwz-ng3maVN3f2o7IqRwJWflevwsyK2wEKvCxNoelJXqNQ9EDiEouloIU_1gfu6h2I5Ha_G8BQdzaZ2BHdv2wyI3OK10/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> |
Cara Install :
- Masuk ke Dasbord klik Rancangan.
- Pilih Edit HTML.
- Pastekan CSS nya diatas kode B:SKIN
- Cari kode <body>
- Selanjutnya ganti dengan kode HTML diatas.
free music ๑۞๑ Ephphatha ๑۞๑
Poskan Komentar