Bismillahirrahmanirrahiim
Preloader akan muncul selama website di-load / dimuat semuanya, setelah semua siap, baru halaman ditampilkan secara sempurna. Biasanya website yang banyak menerapkan itu website bertipe portfolio, website promosi film, website artis, website media, dan lainnya. Namun kurang cocok untuk website yang butuh akses cepat seperti website berita atau portal berita.
Untuk membuat preloader dihalaman website kita akan menggunakan jQuery dan Css, oke langsung saja ikuti langkah-langkah dibawah ini
Langkah Pertama
Download file jQuery disini
Langkah Kedua
Ketiklah code css dibawah ini, simpan dengan nama preloader.css
#preloader {
position: fixed;
left: 0px;
top: 0px;
z-index: 99999;
width: 100%;
height: 100%;
overflow: visible;
background: #ffffff none repeat scroll 0% 0%;
}
.socket {
position: relative;
top: 40%;
width: auto;
height: auto;
margin: auto;
display:block;
}
.socket img{
display:block;
margin:auto;
}
.container{
text-align:center;
padding-top:100px;
}
Langkah Kedua
Ketiklah kode HTML dibawah ini dan simpan dengan nama index.html, untuk gambar preloader.gif anda bisa cari di Google atau bisa diganti dengan logo milik anda
<!DOCTYPE html>
<html lang="en">
<head>
<title>Preloader Using jQuery & Css</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="preloader.css">
<script src="jquery.min.js"></script>
<script type="text/javascript">
//script preloader
(function( $ ) {
$(window).on('load', function(){
$('#preloader').fadeOut('slow',function(){
$(this).hide();
});
});
})(jQuery);
//slow bisa diganti dengan angka misal 2000
</script>
</head>
<body>
<div id="preloader">
<div class="socket">
<img src="preloader.gif" alt="">
</div>
</div>
<div class="container">
<h1>Preloader</h1>
<p>Display after loading page</p>
</div>
</body>
</html>
Langkah Ketiga
Test atau eksekusi script yang telah anda ketik, kemudian lihat hasilnya jika sama dengan gambar dibawah ini maka anda telah berhasil membuat preloader dengan jQuery & Css
Untuk scriptnya silahkan download dari button dibawah ini.
Sampai disini dulu tutorial dari saya, semoga tutorial ini bermanfaat bagi anda dan jangan lupa di share, atas segala kekuranganya mohon dimaafkan, jika ada yang ingin ditanyakan silahkan tinggalkan komentar.
1 Comments
semoga bermanfaat (o)
ReplyDeleteBerkomentarlah dengan baik dan sopan