Hallo teman – teman berjumpa lagi pada tutorial dumetschool, pada tutorial kali ini saya akan membahas Cara Memasang Plugin Preloader di Website, website tanpa animasi ibarat sayur tanpa garam kurang sedep ya teman – teman. Plugin adalah sebuah fungsi dari jquery yang sudah siap pakai untuk digabungkan atau di rangkai dalam sebuah website. Untuk menggunakan plugin kita tidak perlu jago bahasa pemrograman Javascript dan Jquery. Karena dalam menginstal plugin kita tinggal ikuti step -step yang diberikan dari si pembuat plugin tersebut.
Oke langsung saja kita buat sebuah website sederhana terlebih dahulu, silahkan teman – teman buat sebuah website nya.
<!DOCTYPE html>
<html>
<head>
<title>Cara Memasang Plugin Preloader di Website</title>
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<!-- End Of Preloader -->
<a href="index.html" id="show-test-1">Home</a>
Ini Test
</body>
</html>
kalau sudah silahkan teman – teman kunjungi website Jquery.com karena kita akan menggunakan core dari jquery. Kalau sudah silahkan teman – teman copy link address core jquery tersebut ke dalam website yang kita buat tadi seperti di bawah ini:
Oke kalau sudah silahkan teman – teman  kunjungi website yang menyediakan plugin preloader tersebut, silahkan klik link ini, di situ silahkan teman – teman masukan css-nya seperti di bawah ini:
<style>
/* Pre loader */
body {
overflow: hidden;
}
#preloader {
position:fixed;
top:87px;
left:0;
right:0;
bottom:0;
background-color:rgba(255,255,255,1); /* change if the mask should have another color then white */
z-index:10000; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(preloader.gif);/* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
/* end of preloader */
</style>
Oke kalau sudah silahkan masukan function dari plugin tersebut kedalam website kita seperti di bawah ini:
Oke kalau sudah silahkan save dan jalan pada browsernya, untuk melihat hasil dari Cara Memasang Plugin Preloader di Website.  semoga bermanfaat. demo live.