Membuat Efek Loading di Blog dengan CSS

Blog Masholeh || Membuat Efek Loading di Blog dengan CSS, Kali ini kita membuat efek animasi yang ditampilkan bukan karena terpicu oleh momen klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang efek animasi loading ketika perpindahan halaman dengan cara ini:

Anggaplah JQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTML template, kemudian letakkan kode CSS ini di atas kode tag ]]></b:skin> atau </head> dengan pembungkus <style>...</style>:

#efek-load-db {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Kemudian sisipkan kode ini di atas tag kode </body>:

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="efek-load-db">Sedang Memuat...</div>');
$(window).on("beforeunload", function() {
    $('#efek-load-db').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Klik Simpan Template.

Jika sobat ingin memambahkan / memberi animasi gunakan contoh css dibawah ini:

#efek-load-db {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#222222 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jOUiO8hw0dWyoGdB6Jno7tbLbWYPDbFDzehBDFxzttuY3wCGkOpH4M3SwUOLfPqU6nw5WZ6wKGxIrB8eqO2g8VCdGeY5ZmasGQFhJtk_4oiS5XZccr_Tw9gYDv8T32zgarlZpE3MVUA/s1600/AjaxLoader.gif') no-repeat 50% 50%;font:0/0 a;
text-shadow:none;
padding:1em 1.2em;
display:none;
}

untuk membuat animasi loading kunjungi http://www.ajaxload.info/

Semoga berguna dan bermanfaat..