Membuat Efect Animasi Loading Pada Blog

Selamat datang sobat, Efek loading pada blog/web kelihatan nya memang kren, bukan hanya kren saja itu juga menggambarkan kreatifitas si pembuat blog. Apa yang di maksud dengan Animasi loading pada blog?

membuat efek animasi loading pada saat halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya overlay/tabir animasi saat tautan tersebut diklik. bahasa sederhananya begini, Misal kita ingin pindah ke halaman lain atau me' realod halaman, di saat dalam proses memuat halaman yang baru maka efek loading itu akan keluar, bisa berupa gambar GIF dll yang menggambarkan terjadinya proses loading.

Jika sobat ingin mencobanya silahkan ikuti tutorial di bawah.

letakkan kode CSS ini di atas ]]></b:skin> atau </style>:

#page-loader {
  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 </body>:

<script>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Save Template