Memasang Loader mengunakan jQuery ajax
selamat datang di blog arsipbertuah.pada posting ane kali ini ane mau mengajak agan untuk belajar Ajax JQuery membuat animasi loader pada web.animasi ini menggunakan gambar dengan format gif yang akan ditampilkan pada web ketika web melakukan loading saat request data .animasi loader akan disembunyikan lagi ketika proses load data telah selesai dan hasil request akan di tampilkan di elemen HTML.untuk membuat gambar animasi agan bisa download di ajaxloader.com di situ agan bisa pilih gambar loader yang diinginkan dan bisa agan modifikasi warna dan ukurannya sesuai dengan kebutuhan web agan.
 |
| belajar loader jquery ajax |
pertama agan sudah punya gambar animasinya seperti yang ane sarankan diatas.
contoh gambar loader ane seperti ini.
contoh gambar loader
berikutnya buat dokumen html dan dan koding Jquery seperti dibawah ini
contoh koding html dan jquery
<html>
<head>
<title>belajar jquery membuat loader ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery-1.11.3.js"></script>
</head>
<style type="text/css">
.spinner {
position: ;
margin-left: 0px;
margin-right: 0px;
text-align:center;
overflow: auto;
padding: 10px 10px 10px 10px;
}
#img-spinner{
width: 45px;
height: 45px;
}
</style>
<body>
<div>
<button id="load">klik load page</button>
</div>
<div class="spinner" style="display:none">
<img id="img-spinner" src="img/loader.gif" >
</div>
<div class="konten"></div>
</body>
</html>
<script type="text/javascript">
$("#load").click(function(){
$.ajax({url:"uji_load.php",
beforeSend:function(){$(".spinner").css("display","block");},
success:function(result){$(".spinner").css("display","none");$(".konten").html(result);}
});
});
</script>
ganti nama gambar kode bewarna merah yang sesuai dengan gambar animasi dan url pada komputer agan karena pada posting ini menggunakan php maka bua folder baru di C:/xampp/htdocs simpan dokumennya di file yang baru agan buat.jangan lupa gambar animasinya juga disimpan di folder yang sama. setelah itu kita buat dokumen php yang ke dua untuk kita proses buat praktek ajax loadernya seperti di bawah ini.pada koding php berikutnya ane menggunakan sleep untuk memberi delay proses eksekusi koding php.nah, pada saat delay tersebut animasi loader akan di tampilkan. kita buat namanya uji_load.php
pengujian loader ajax pada php
<?php
sleep("5");
echo "ini adalah hasil loader menggunakan jquery ajax. <br>
text ini berasal dari dokumen php uji_load.php";
?>
simpan di folder yang sama.
berikutnya silahkan buka browser buat testing nya .seperti biasa untuk buka dokumen php menggunakan localhost
begitulah cara buat animasi loader menggunakan jquery ajax .silahkan komen dibawah ini jika ada pertanyaan.semoga sukses.
Mantap terimakasih, saya sudah bisa menggunakannya
ReplyDelete