Setelah beberapa post tentang status loading sekarang aku mau posting Animasi Loading buatanku yang menggunakan css dan jquery dan memanfaatkan properti animate dari jquery, dan juga efek transisi nya. pada animasi loading ini aku coba nyari ide yang berbeda dari yang lain dan akhirnya ketemu juga, efek animasinya yaitu dengan membuat teks berjatuhan lalu menghilang dan menampilkan gambar Loading lalu ketika semua data Halaman termuat maka efek loadingnya akan menghilang.
ILUSTRASI
<script type='text/javascript'>
// ZTO Loading
// By : http://zhinto.blogspot.com/
$(function () {
$(".satu").animate({
top: "0"
}, 1000);
$(".dua").animate({
top: "0"
}, 2000);
$(".tiga").animate({
top: "0"
}, 3000);
$(".empat").animate({
top: "0"
}, 4000);
$(".lima").animate({
top: "0"
}, 5000);
$(".enam").animate({
top: "0"
}, 6000);
$(".tuju").animate({
top: "0"
}, 7000, function () {
$(".satu,.dua,.tiga,.empat,.lima,.enam,.tuju").fadeOut();
$(".loading").fadeIn()
})
});
// Menghilangkan Elemen dengan kelas pembukaan saat halaman termuat secara keseluruhan
$(window).load(function () {
$('.pembukaan').fadeOut()
});
</script>.pembukaan {
background:#444;
color:#00A3E2;
font:100px/100px serif;
text-align:center;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999999999999
}
.pembukaan .satu, .dua, .tiga, .empat, .lima, .enam, .tuju {
position:relative;
display:inline-block;
top:-1000px;
margin:20%auto
}
.pembukaan .loading {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: transparent url(gambar-loading-anda.gif)no-repeat center center;
display: none
}<div class='pembukaan'><span class='satu'>W</span><span class='dua'>E</span><span class='tiga'>L</span><span class='empat'>C</span><span class='lima'>O</span><span class='enam'>M</span><span class='tuju'>E</span><span class='loading'></span> </div>
Pastikan anda sudah memasang framework jquery diblog anda lalu simpan kode Jquery DOMnya dibawah framework jquery. Kode HTMLnya bisa anda simpan dibawah kode
<body>. Kode css simpan diatas kode ]]></b:skin>Artikel Bersaudara:
1. Status loading part 1
2. Status Loading Part 2
