Trik Membuat Efek Loading Sederhana dengan Animasi Di blog

Loading efek dengan animasi

Efek loading sederhana dengan animasi yang akan saya bagikan kali ini menggunakan sebuah gambar berformat gif yang nantinya akan di letakan ke dalam CSS, nah agar gambar ini berfungsi sebagai efek loading di blog, anda perlu membuat tambahan CSS dan JQuery di dalam template

Untuk membuatnya ikuti langkah-langkah berikut


Buka template editor, Cari kode ]]</b:skin> atau </style> dan letakan kode CSS berikut di atasnya

/* Efek Loading Sederhana */
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #303030 url("https://lh3.googleusercontent.com/-G2XgxvZo1Hg/WNDl17P9dJI/AAAAAAAAA94/1BMa1DAN83QhzYCWZPVe4COQaVZ-x515gCJoC/s128-rw/Preloader_3.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

Kemudian tambahkan JQuery berikut diatas </body> (Terletak dibagian paling bawah)

<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir
$(document.body).append('<div id="page-loader"></div>');
// Halaman Aktif
$(window).on("beforeunload", function() {
// animasi dengan efek fadeIn
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Simpan template dan lihat hasilnya

Anda juga dapat mengganti Url gambar diatas sesuai keinginan anda.

Bagaimana mudah bukan? Selamat mencoba, semoga bermanfaat.
Advertisement
Advertisement

Diam lebih baik dari pada berdebat dengan orang‐orang bodoh.