For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat Loading Animasi Battery (baterai) Terbaru

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.