Cara sederhana membuat kustom preloading screen website dengan JavaScript

Linkdesain.com . Apa itu preloading screen pada website? preloading screen yang dimaksud disini adalah suatu area yang akan menutupi halaman web sebelum website tsb benar-benar keload / terbuka seluruhnya, jadi selama website dalam keadaan loading area preloading ini akan menutup halaman web dan pengunjung situs tidak dapat mengakses konten apapun sampai halaman benar-benar selesai loading. Membuat preloading ini sangatlah mudah kita dapat membuat dengan animasi css atau gambar animasi yang kita taruh di preloading screen dan dengan bantuan javascript tentunya.

tambahkan js ini dihalaman webmu

<script >
jQuery(document).ready(function($) {
$(window).load(function() { $(".preloading").fadeOut("slow"); })
});
</script>

maksud js tersebut adalah ketika halaman masih loading maka area dengan class .preloading akan dimunculkan dan setelah loading halaman benar-benar selesai, area preloading tsb akan hilang secara fadeout dan pengunjung web dapat mengakses halaman web.

tambahkan tag html berikut setelah tag <body>

<div class="preloading">
<div class="textpreload">LOADING</div>
</div>

maksud tag html tsb adalah preloading berserta konten dalam class .preloading dalam hal ini adala text loading dengan nama class .textpreload yang akan dimunculkan saat halaman web masih loading. kita dapat mengganti text loading ini dengan gambar animasi (Gif) ataupun animasi css.

Kemudian tambahkan css

.preloading {width: 100%; 
text-align: center;
height: 100%;
position: fixed;
background: #000000;
z-index: 999999;
top: 0px; 
display: table; 
left:0}
.preloading .textpreload {
display: table-cell; 
text-align: center; 
vertical-align: middle;}

banyak sekali situs yang menyediakan gambar preloading ini, contohnya kamu dapat mengambilnya dari sini
http://preloaders.net/en/free
Sumber : Klik disini