Langsung ke konten utama

Belajar Jquery Ajax : menampilkan animasi loader

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.

loader ajax
belajar loader jquery ajax
yuk, lansung saja kita praktek contohnya:
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.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Metode (SAW) Simple Additive Weighting dan contoh coding PHP

Pengertian SAW Simple Additive Weighting meupakan metode penjumlahan terbobot konsep dasar metode SAW adalah mencari penjumlahan terbobot dari rating kinerja pada setiap alternative pada semua kriteria (Kusumadewi, 2006) Menurut Fajar Nugraha (2011), metode SAW membutuhkan proses normalisasi matrik keputusan (X) ke suatu skala yang dapat diperbandingkan dengan semua rating alternatif yang ada. Metode SAW mengenal adanya 2(dua) atribut yaitu kriteria (benefit) dan kriteria biaya (cost) perbedaan mendasar dari kedua kriteria ini adalah dalam pemilihan kriteria ketika mengambil keputusan. Adapun langkah penyelesaian dalam menggunakannya adalah 1. Menentukan alternative, yaitu Ai 2. Menentukan kriteria yang akan dijadikan acuan dalam pengambilan keputusan, yaitu Cj 3. Memberikan nilai rating kecocokan setiap alternative pada setiap kriteria. 4. Menentukan bobot preferensi atau tingkat kepentingan (W) setiap kriteria W=[ W1 W2 W3 W4] 5. Membuat table rating kecocokan dari setiap ...
3 komentar
Baca selengkapnya

Belajar web : load page dengan Jquery Ajax

selamat datang di arsipbertuah pada posting satu ini saya akan membahas tentang cara membuat load halaman menggunakan jquery ajax. dengan tujuan untuk mempercepat proses loading karena semua element web tidak di load semua. Pengertian Jquery jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan jquery adalah untuk mempercantik tampilan dan membuat web kita lebih interaktif pengertian Ajax AJAX(Asynchoronous Javascript and XML) adalah sebuah teknik pemograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar,sehingga halaman web tidak perlu di reload lagi hanya untuk menganti se...
Posting Komentar
Baca selengkapnya

Belajar php : membuat nomor ID otomatis untuk insert data

Penjelasan tentang membuat nomor id otomatis Hallo gan pada postingan saya kali ini .saya akan berbagi cara untuk membuat id otomatis pada pemograman PHP dan mySQL . id otomatis maksudnya adalah kita akan menciptakan sebuah nomor unik dengan proses penambahan kode tersebut tanpa kita inputkan alias akan dibuat dan diproses oleh php.hampir semua aplikasi menggunakan id otomatis untuk penambahan data baik itu program berbasis desktop maupun berbasis web.jadi jangan diragukan lagi ,agan sudah berada dalam kesempatan yang baik untuk belajar menjadi programmer yang handal. dalam pemograman PHP banyak sekali cara yang dapat dilakukan untuk generate nomor unik yang dapat digunakan sebagai primary key pada database. pada kasus tutorial kali ini saya praktekan menyimpan sebuah data ke database menggunakan PHP yang sesuai dengan posting ini membuat id otomatis.untuk itu saya asumsikan ,agan sudah bisa membuat tabel database dan mengkoneksikannya.pada kasus ini saya mengunakan database seperti in...
Posting Komentar
Baca selengkapnya