Animasi Loading dengan jQuery

Banyak aplikasi web memiliki beberapa jenis animasi loading (alias spinner). Sebuah animasi loading penting sebagai penanda sinyal untuk pengguna bahwa aplikasi tersebut masih melakukan sesuatu dan pengguna harus menunggu sampai proses tersebut selesai. Loading animasi ini penting ketika Anda menggunakan Ajax dalam web atau Blog Anda.

Menggunakan jQuery Ajax sangat mudah untuk membuat animasi loading yang akan ditampilkan di setiap kali permintaan Ajax dijalankan, Pertama-tama, Anda memerlukan aniamasi gif, Anda dapat memilih gif gratis di ajaxload.info.

Sertakan juga div yang menandakan gambar di setiap halaman blog Anda. Biasanya, Anda bisa menambahkan div ini ke layout atau header.

<div id="spinner" class="spinner" style="display:none;"> <img id="img-spinner" src="spinner.gif" alt="Loading"/> </div>

Atribut style = display:none; = membuat div tak terlihat ketika halaman dibuka. Saya mnggunakana div yang akan muncul di tengah layar:

.spinner { position: fixed; top: 50%; left: 50%; margin-left: -50px; /* half width of the spinner gif */ margin-top: -50px; /* half height of the spinner gif */ text-align:center; z-index:1234; overflow: auto; width: 100px; /* width of the spinner gif */ height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */ }

Untuk menampilkan spinner secara otomatis, tambahkan jQuery javascript berikut disetiap halaman dengan memasukkan ke file tata letak atau kop.

<script type="text/javascript"> $(document).ready(function(){ $("#spinner").bind("ajaxSend", function() { $(this).show(); }).bind("ajaxStop", function() { $(this).hide(); }).bind("ajaxError", function() { $(this).hide(); }); }); </script>

Script ini menampilkan animasi loading ketika permintaan Ajax dimulai dan menyembunyikannya secara otomatis ketika permintaan Ajax selesai. Selain itu, Anda bisa menggunakan spinner untuk permintaan non-Ajax. Contoh dibawah ini saya akan meng-upload file biasa, Jika Anda menggunakan html biasa, meng-upload file tidak akan memicu permintaan Ajax sehingga spinner Anda tidak akan terlihat secara otomatis.

Dalam bentuk file upload Anda, memberikan tombol submit ID html, misalnya buttom-upload. Sekarang meliputi jQuery kode javascript untuk menunjukkan perintah ketika formulir dikirimkan:

<script type="text/javascript"> $(document).ready(function(){ $('#button-upload').click(function() { $('#spinner').show(); }); }); </script>

Anda tidak perlu menyembunyikan spinner karena ketika permintaan selesai, maka spinner tidak akan terlihat.