Penjelasan
Pada kesempatan sebelumnya saya sudah membahas bagaimana cara membuat Animasi preloader yang keren dengan tampilan Bola berputar putar melingkar dengan berbagai warna, Nah pada postingan saya kali ini pula saya akan membahas Bagaimana cara membuat Page Preloader atau Loading Animasi Battery atau baterai Terbaru (Responsif)
Nah ketika anda menerapkan Animasi preloader pada blog anda maka setiap kali anda memuat data atau memasuki suatu halaman situs blog tersebut maka tampilan situs blog anda akan menampilkan Animasi preloader
Contoh Tampilan
Cara Penerapan
Sama halnya dengan informasi mengenai cara membuat Animasi preloader Sebelum nya, Animasi preloader yang akan saya infokan kali ini juga dibuat menggunakan CSS, jika anda ingin menggunakan atau ingin menerapkan nya pada situs blog anda, maka, simak baik baik setiap Tahap demi tahapan nya, oke
1. Login ke akun blogger anda
2. Pergi ke Template dan kemudian pilih edit HTML
3. Pasang Kode jQuery berikut tepat diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>Anda bisa memasang script jQuery diatas jika anda belum memasangnya, dan jika sudah anda bisa melewati tahap yang satu ini
4. Kemudian cari kode </body> dan letakkan kode berikut tepat diatas nya
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".cssload-battery .cssload-liquid").fadeOut(),$("#icNewPreloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>5. Selanjutnya cari kode ]]></b:skin> dan letakkan kode CSS berikut tepat diatas nya
<style type='text/css'>
/* Preloader */
#icNewPreloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.cssload-battery {display: block;margin:97px auto;position: relative;width: 2.25rem;height: 4.5rem;box-shadow: 0 0 0 0.2rem rgb(66,92,119);-o-box-shadow: 0 0 0 0.2rem rgb(66,92,119);-ms-box-shadow: 0 0 0 0.2rem rgb(66,92,119);-webkit-box-shadow: 0 0 0 0.2rem rgb(66,92,119);-moz-box-shadow: 0 0 0 0.2rem rgb(66,92,119);
border-radius: 0.09rem;-o-border-radius: 0.09rem;
-ms-border-radius: 0.09rem;
-webkit-border-radius: 0.09rem;
-moz-border-radius: 0.09rem;
background: white;
}
.cssload-battery:before {
content: '';
position: absolute;
left: 0.5625rem;
right: 0.5625rem;
top: -0.3375rem;
height: 0.3375rem;
width: 1.125rem;
background: rgb(66,92,119);
border-radius: 0.18rem;
-o-border-radius: 0.18rem;
-ms-border-radius: 0.18rem;
-webkit-border-radius: 0.18rem;
-moz-border-radius: 0.18rem;
}
.cssload-battery:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-right: 2.25rem solid transparent;
border-bottom: 4.05rem solid rgba(255,255,255,0.32);
}
.cssload-liquid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 2.25rem;
background: rgb(113,251,133);
animation: load 2.59s infinite;
-o-animation: load 2.59s infinite;
-ms-animation: load 2.59s infinite;
-webkit-animation: load 2.59s infinite;
-moz-animation: load 2.59s infinite;
}
.cssload-liquid:after, .cssload-liquid:before {
content: '';
position: absolute;
top: -0.5rem;
height: 1.125rem;
width: 1.4625rem;
background: rgb(113,251,133);
opacity: 0;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.cssload-liquid:after {
right: 0;
animation: cssload-liquid-1 2.59s infinite;
-o-animation: cssload-liquid-1 2.59s infinite;
-ms-animation: cssload-liquid-1 2.59s infinite;
-webkit-animation: cssload-liquid-1 2.59s infinite;
-moz-animation: cssload-liquid-1 2.59s infinite;
}
.cssload-liquid:before {
left: 0;
animation: cssload-liquid-2 2.59s infinite;
-o-animation: cssload-liquid-2 2.59s infinite;
-ms-animation: cssload-liquid-2 2.59s infinite;
-webkit-animation: cssload-liquid-2 2.59s infinite;
-moz-animation: cssload-liquid-2 2.59s infinite;
}
@keyframes load {
0% {
top: 4.5rem;
}
70% {
top: 1.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 4.5rem;
}
}
@-o-keyframes load {
0% {
top: 4.5rem;
}
70% {
top: 1.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 4.5rem;
}
}
@-ms-keyframes load {
0% {
top: 4.5rem;
}
70% {
top: 1.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 4.5rem;
}
}
@-webkit-keyframes load {
0% {
top: 4.5rem;
}
70% {
top: 1.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 4.5rem;
}
}
@-moz-keyframes load {
0% {
top: 4.5rem;
}
70% {
top: 1.125rem;
}
90% {
top: 0;
}
95% {
top: 0;
}
100% {
top: 4.5rem;
}
}
@keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 1.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 0.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-o-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 1.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 0.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-ms-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 1.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 0.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-webkit-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 1.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 0.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-moz-keyframes cssload-liquid-1 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
22% {
height: 0.28125rem;
top: 0.375rem;
opacity: 1;
}
25% {
top: -0.25rem;
}
35% {
height: 1.125rem;
top: -0.5rem;
}
55% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 0.61875rem;
opacity: 1;
top: -0.275rem;
}
96% {
height: 0.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 1.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 1.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 0.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-o-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 1.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 1.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {
height: 0.84375rem;
opacity: 0;
top: 0.5rem;
}
100% {
height: 0;
opacity: 0;
}
}
@-ms-keyframes cssload-liquid-2 {
0% {
height: 0;
opacity: 0;
top: -0.5rem;
}
17.5% {
height: 0.28125rem;
top: 0.2rem;
opacity: 1;
}
20% {
top: -0.25rem;
}
25% {
height: 1.40625rem;
top: -0.625rem;
}
45% {
height: 0.28125rem;
top: -0.125rem;
}
60% {
height: 1.40625rem;
opacity: 1;
top: -0.5rem;
}
96% {height: 0.84375rem;opacity: 0;top: 0.5rem;}
100% {height: 0;opacity: 0;}}
@-webkit-keyframes cssload-liquid-2 {
0% {height: 0;opacity: 0;top: -0.5rem;}
17.5% {height: 0.28125rem;top: 0.2rem;opacity: 1;}
20% {top: -0.25rem;}
25% {height: 1.40625rem;top: -0.625rem;}
45% {height: 0.28125rem;top: -0.125rem;}
60% {height: 1.40625rem;opacity: 1;top: -0.5rem;}
96% {height: 0.84375rem;opacity: 0;top: 0.5rem;}
100% {height: 0;opacity: 0;}}
@-moz-keyframes cssload-liquid-2 {
0% {height: 0;opacity: 0;top: -0.5rem;}
17.5% {height: 0.28125rem;top: 0.2rem;opacity: 1;}
20% {top: -0.25rem;}
25% {height: 1.40625rem;top: -0.625rem;}
45% {height: 0.28125rem;top: -0.125rem;}
60% {height: 1.40625rem;opacity: 1;top: -0.5rem;}
96% {height: 0.84375rem;opacity: 0;top: 0.5rem;}
100% {height: 0;opacity: 0;}}
</style>6. Terakhir letakkan kode dibawah ini tepat diatas kode <body>
<div id='icNewPreloader'>
<div class="cssload-battery">
<div class="cssload-liquid"></div>
</div>
</div>7. Pastikan kode diterapkan dengan benar, jika sudah simpan dan lihat bagaimana hasilnya
Jika anda menemukan atau ketika anda menerapkannya pada situs blog sobat terdapat kesalahan, maka anda bisa melaporkan nya Melalui form komentar yang telah disediakan, atau bisa menghubungi kami melalui laman sosial media yang kami miliki, Terimakasih atas perhatiannya