-->
 
Animasi Loading Blog Dengan CSS

BERANDAARCHIVEQUR'ANYASINTAHLILAMALAN

     
Mempercantik Blog dengan Animasi Loading,,,menunggu loading blog sampai konten terlihat semua kadang memerlukan waktu yang mungkin tergantung dari berat blog itu sendiri, juga koneksi internet yang saat itu dipakai,, dan hal tersebut terkadang membuat kita bosan,, Untuk membuat loading lebih menarik alangkah baiknya bila ditambahkan Animasi Loading,,

Untuk style animasi loading yang saya share ini menggunakann CSS,,apabila sobat ada yang berminat silahkan di lihat kode-kodenya dibawah ini. Untuk style loading yang saya share disini hanya ada dua macam,, kalau Sobat mau mendapatkan style yang lebih menarik dan lebih banyak kunjungi saja situs CSSLOAD.NET, dan maaf untuk link demonya tidak tersedia, tapi kalau mau melihat demonya silahkan direfresh/diloading lagi pada postingan ini...
PREVIEWCSSHTML
#loading {z-index:999;width:100%;height:100%;position:fixed;top:0;right:0;background:#000;
}
#circular3dG{position:relative;width:300px;height:300px;margin:10% auto;
}
.circular3dG{position:absolute;background-color:#999;width:84px;height:84px;
-moz-border-radius:89px;-moz-animation-name:bounce_circular3dG;-moz-animation-duration:0.48s;-moz-animation-iteration-count:infinite;-moz-animation-direction:linear;
-webkit-border-radius:89px;-webkit-animation-name:bounce_circular3dG;-webkit-animation-duration:0.48s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:linear;
border-radius:89px;animation-name:bounce_circular3dG;animation-duration:0.48s;animation-iteration-count:infinite;animation-direction:linear;
}
#circular3d_1G{left:122px;
top:19px;-moz-animation-delay:0.18s;-webkit-animation-delay:0.18s;animation-delay:0.18s;
}
#circular3d_2G{left:183px;
top:70px;-moz-animation-delay:0.24s;-webkit-animation-delay:0.24s;animation-delay:0.24s;
}
#circular3d_3G{left:220px;
top:136px;-moz-animation-delay:0.3s;-webkit-animation-delay:0.3s;animation-delay:0.3s;
}
#circular3d_4G{left:206px;
top:202px;-moz-animation-delay:0.36s;-webkit-animation-delay:0.36s;animation-delay:0.36s;
}
#circular3d_5G{left:127px;
top:220px;-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;animation-delay:0.5s;
}
#circular3d_6G{left:23px;
top:145px;-moz-animation-delay:0.48s;-webkit-animation-delay:0.48s;animation-delay:0.48s;
}
#circular3d_7G{eft:0px;
top:42px;-moz-animation-delay:0.6s;-webkit-animation-delay:0.6s;animation-delay:0.6s;
}
#circular3d_8G{
left:52px;
top:0px;-moz-animation-delay:0.6s;-webkit-animation-delay:0.6s;animation-delay:0.6s;
}
@-moz-keyframes bounce_circular3dG{0%{-moz-transform:scale(1)}100%{-moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circular3dG{0%{-webkit-transform:scale(1)}100%{-webkit-transform:scale(.3)}
}
@keyframes bounce_circular3dG{0%{transform:scale(1)}100%{transform:scale(.3)}
}
.waiting{position:fixed;bottom:10%;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;
}		<body onload="init()">
<div id='loading'>
<div id='circular3dG'>
<div class='circular3dG' id='circular3d_1G'/>
<div class='circular3dG' id='circular3d_2G'/>
<div class='circular3dG' id='circular3d_3G'/>
<div class='circular3dG' id='circular3d_4G'/>
<div class='circular3dG' id='circular3d_5G'/>
<div class='circular3dG' id='circular3d_6G'/>
<div class='circular3dG' id='circular3d_7G'/>
<div class='circular3dG' id='circular3d_8G'/>
</div>
<span class='waiting'>Please Wait...&#9785;</span></div>
<script src="https://sites.google.com/site/binkbenk77/loading.js"></script>
#loading{z-index:999;width:100%;height:100%;position:fixed;top:0;right:0;background: #000;overflow:hidden;
}
#facebookG{position:absolute;top:30%;left:45%;
width:128px}

.facebook_blockG{
background-color:#E0C06E;
border:3px solid #292429;
float:left;
height:91px;
margin-left:7px;
width:24px;
opacity:0.1;
-moz-animation-name:bounceG;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(0.7);
-webkit-animation-name:bounceG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(0.7);
-ms-animation-name:bounceG;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(0.7);
-o-animation-name:bounceG;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(0.7);
animation-name:bounceG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(0.7);
}

#blockG_1{
-moz-animation-delay:0.39s;
-webkit-animation-delay:0.39s;
-ms-animation-delay:0.39s;
-o-animation-delay:0.39s;
animation-delay:0.39s;
}

#blockG_2{
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
}

#blockG_3{
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
}

@-moz-keyframes bounceG{
0%{
-moz-transform:scale(1.2);
opacity:1}

100%{
-moz-transform:scale(0.7);
opacity:0.1}

}

@-webkit-keyframes bounceG{
0%{
-webkit-transform:scale(1.2);
opacity:1}

100%{
-webkit-transform:scale(0.7);
opacity:0.1}

}

@-ms-keyframes bounceG{
0%{
-ms-transform:scale(1.2);
opacity:1}

100%{
-ms-transform:scale(0.7);
opacity:0.1}

}

@-o-keyframes bounceG{
0%{
-o-transform:scale(1.2);
opacity:1}

100%{
-o-transform:scale(0.7);
opacity:0.1}

}

@keyframes bounceG{
0%{
transform:scale(1.2);
opacity:1}

100%{
transform:scale(0.7);
opacity:0.1}
}
.waiting{position:fixed;bottom:10%;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;
}		 <body onload="init()">
<div id="loading">
<div id="facebookG">
<div id="blockG_1" class="facebook_blockG">
</div>
<div id="blockG_2" class="facebook_blockG">
</div>
<div id="blockG_3" class="facebook_blockG">
</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.
Posted On : 23 Juni 2013 Time : 16.19
SHARE TO :
| | Powered By : C.(BH-elatos) | Copyright By : cuerosbhelatos | |