Saat ini saya akan memberikan tutorial bagaimana membuat page loader pada website. page loader atau sering disebut loading page cukup menarik digunakan pada website kita, saat kita masuk kehalaman baru maka akan muncul suatu icon .gif sebelum halaman tersebut tampil sempurna. untuk membuat page loader kita membutuhkan Jquery, untuk lebih lanjut mari kita coba.
Bahan :
- Download Jquery disini
- Untuk jenis loader gif bisa didownload dari link berikut
* Loader.io
* AjaxLoad
* preloaders.net
1. Buatlah folder dengan nama loader dan buat sebuah file index.html pada localhost server, Masukan script berikut.
3. tambahkan script berikut dibawah link jquery yang berfungsi untuk menghilangkan loader secara perlahan.- Untuk jenis loader gif bisa didownload dari link berikut
* Loader.io
* AjaxLoad
* preloaders.net
1. Buatlah folder dengan nama loader dan buat sebuah file index.html pada localhost server, Masukan script berikut.
<html>
<head>
<meta charset="utf-8">
<title>Page loader</title>
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<p>Hello this my page loader</p>
<div id="loader-page"></div>
<script src="jquery.js"></script>
</body>
</html>
#loader-page {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('masukan url loader gif anda') center no-repeat #fff;
}<script>
$(window).load(function() {
$("#loader-page").fadeOut("slow");
});
</script>
Semoga bermanfaat.
0 komentar: