Kita sering menemukan sebuah website yang memiliki salah satu fitur ini yaitu terdapat animasi loading sebelum menampilkan tampilan websitenya. Mungkin anda-anda sekalian pun sering bertanya apa fungsi dari website-website yang mempunyai animasi loading bukan?
Sebenarnya animasi loading ini hanya untuk mempercantik sebuah tampilan website dan membuat si user atau orang yang melihat website anda tidak kesal menunggu karena disuguhkan dengan tampilan animasi loading. Dan saya yakin anda pun pasti lebih menyukai website yang terdapat animasi loadingnya dari pada yang tidak ada. Betul bukan?
Baik, kita langsung saja ke tutorialnya tentang Cara membuat animasi loading pada website. untuk demonya anda bisa lihat diatas.
Langkah pertama silahkan anda buat file index.html, dan isikan kode berikut.
<html>
<head>
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<div id="preloader">
<div id="loading"></div>
</div>
<div class='content'>
<img src='logo.png' />
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#content").fadeOut();
$("#preloader").delay(500).fadeOut("slow");
})
</script>
</body>
</html>
<head>
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<div id="preloader">
<div id="loading"></div>
</div>
<div class='content'>
<img src='logo.png' />
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#content").fadeOut();
$("#preloader").delay(500).fadeOut("slow");
})
</script>
</body>
</html>
Setelah anda selesai membuat dan memindahkan kode diatas kedalam file index.html, maka langkah selanjutnya adalah membuat file style.css yang berfungsi untuk mempercantik atau membuat indah animasi loading tersebut. Dan silahkan masukan kode berikut.
body {
padding: 0;
margin: 0;
background-image: url('http://michaelleadbetter.com.au/portfolio/Landscape-Photography-Brisbane.jpg');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}
#preloader {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
z-index:99;
}
#loading {
width:200px;
height:200px;
position:absolute;
top: 40%;
left:50%;
background-image:url(http://content.iress.co.uk/hubfs/wemakeithappen/img/Preloader.gif);
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px;
}
.content {
width: 500px;
margin: 10px auto;
}
.content img {
width: 500px;
margin: 100px auto;
}
Selesai sudah tutorial kali ini, cukup mudah bukan cara membuat animasi loading pada website.
Untuk source code / semua file nya anda bisa download disini / here
Terima kasih telah mengunjungi blog Dewa Coding 21 dan jangan lupa berkomentar yah :)
Tutorial / Cara membuat animasi loading pada website
4/
5
Oleh
Unknown
