Membuat Efek Animasi Loading Sederhana Saat Memuat Halaman

Membuat Efek Animasi Loading Sederhana Saat Memuat Halaman

BocahPedia - Kali ini saya akan berbagi tutorial cara memasang efek loading dengan animasi sederhana saat memuat halaman yang bisa kamu terapkan pada blog kamu. Cara kerja dari script ini sangat sederhana, kode akan berjalaan saat kamu membuka blog atau halaman saat proses memuat halaman dan akan berhenti ketika halaman sudah termuat penuh.

Bagi kamu yang ingin mencobanya, bisa ikuti tutorial yang saya jelaskan di bawah ini. 

Memasang efek animasi loading sederhana di Blog:


1. Bukan blogger kamu -> Buka template editor -> Tambahkan kode di bawah ini sebelum tag ]]></b:skin> atau </style>

#cssload {background:url(http://2.bp.blogspot.com/-gwEckHVvyvM/VnbiQdPPZSI/AAAAAAAADcE/wwKnP62ARpc/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}

2. Selanjutnya, tambahkan kode di bawah ini dibawah tag <body>

<div id='cssload'/>

3. Kemudian, tambahkan kode di bawah ini sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>

4. Terakhir, simpan template dan lihat hasilnya.

Sangat mudah bukan?
Demikian tutorial yang saya bagikan mengenai cara Membuat Efek Animasi Loading Sederhana Saat Memuat Halaman, semoga bermanfaat.

Comments