Membuat Animasi Loading Ketika Halaman dimuat dengan jQuery

Membuat Animasi Loading Ketika Halaman dimuat dengan jQuery
Di Posting Oleh : wandi
Kategori : javascript Pemprograman web

Pada artikel kali ini kita akan sama - sama membuat Animasi Loading ketika halaman dimuat menggunakan jquery dan sedikit css agar tampilan lebih menarik, Menunggu halaman selesai dimuat adalah suatu hal yang lumayan membosankan, apa lagi ketika akses jaringan internet yang digunakan sedang lambat, kontent / halaman website akan meload dengan waktu yang cukup lama, tidak jarang pengunjung website kita juga akan merasa tidak nyaman dan akhirnya meninggalkan website kita.

Baca juga Membuat kalkulator dengan jQuery

Agar sedikit mengobati rasa bosan pengujung ketika sedang load halaman website kita, mari kita coba untuk membuat animasi loading agar pengunjung web kita tidak bosan menunggu halaman web selesai di load. Bagaimana caranya ? mari kita simak artikel dibawah ini,

Pertama buat kontent HTML seperti dibawah :

<div class="preloader">
<div class="loading">
<img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" width="80">
<p>Harap Tunggu</p>
</div>
</div>
<h1>Halaman Berhasil di load</h1>

Setelah itu kita percantik page kita dengan sedikit css.

<style type="text/css">
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
}

.preloader .loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font: 14px arial;
}
</style>

Kita tambahankan css ini bertujuan untuk membuat class preloader ini menjadi full page, dan ketika prealoader ini selesai dimuat maka kita akan hilangkan preload ini. Bagaimana caranya ? Yups, dengan bantuan jQuery.

Baca juga Membuat jam digital dengan jQuery

Mari kita buat script jQuery nya, dengan seperti dibawah ini

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".preloader").fadeOut(1000);
})
</script>

Pertama kita load dulu library jquerynya, kemudian kita buat preloader ini menghilang ketika halaman web selesai di load dengan menggunan fungi built-in jQuery yaitu fadeOut. disini kita kasih parameter 1000 artinya melakukan fadeOut selama 1 detik.

Setelah selesai membuat scriptnya mari kita coba hasilnya. Jika berhasil maka kurang lebih akan menampilkan halaman seperti dibawah.

Ketika Halaman di Load

Ketika halaman selesai di load

Saya akan jelaskan sedikit prosesnya. Jika anda lihat ada class yang namanya preloader yang isinya adalah gambar loading dan tulisan "Harap Tunggu".Jadi untuk konsepnya ketika halaman web selesai diload maka preloader ini akan dihilangkan. Jadi yang tampil nanti hanya "Halaman Berhasil di load".

Baca juga Tutorial membuat input tanggal dengan jQuery datePicker

Kalo ingin script full nya bisa di bawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Page Loading</title>
<style type="text/css">
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
}
.preloader .loading {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font: 14px arial;
}
</style>
</head>
<body>
<div class="preloader">
<div class="loading">
<img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" width="80">
<p>Harap Tunggu</p>
</div>
</div>
<h1>Halaman Berhasil di load</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".preloader").fadeOut(1000);
})
</script>
</body>
</html>