Javascript - Membuat Loading Page

Cara membuat loading sebelum page selesai reload di HTML.

1. Masukan kode CSS di atas tag </head> (bisa juga membuat file CSS)
CSS

.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loading.gif) center no-repeat #fff;
}

Ket: Ubah url(images/loading.gif) dengan image anda

2. Lalu masukan kode HTML di bawah tag <body>
HTML

<div class="loading"></div>

3. Masukan kode Javascript di atas tag </body>
JAVASCRIPT

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(window).load(function() {
$(".loading").fadeOut("slow");
});
</script>

Contoh penerapan kode


<html>
 <head>
  <style>
  .loading {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url(images/loading.gif) center no-repeat #fff;
  }
  </style>
 </head>
 <body>
  <div class="loading"></div>
  
  <!-- KONTEN -->
  <img src="http://placehold.it/500x150">
  <img src="http://placehold.it/600x150">
  <img src="http://placehold.it/700x150">
  <img src="http://placehold.it/800x150">
  <img src="http://placehold.it/900x150">
  <img src="http://placehold.it/1000x150">
  <!-- END KONTEN -->
  
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script>
  $(window).load(function() {
   $(".loading").fadeOut("slow");
  });
  </script>
 </body>
</html>

Hasil Loading Page

Terima kasih
Enjoy your day !

Sunday, November 8, 2015

Javascript - Membuat Loading Page

Artikel Terkait