Cara Membuat Loading di Website

Publish Date : 17-08-2016 , dibaca 8210 kali, Hari ini dibaca : 1 kali ,0 comments

Cara Membuat Loading di Website atau Form kali ini kita menggunakan javascript yang meload image Gif, sehingga nanti akan menampilkan efek animasi Gambar loading GIF, Mungkin anda jenuh ketika mengunjungi sebuah page dan loadingnya sangat lama, ketika loading tersebut pula halaman yang anda akses blank alias tidak menampilkan apapun. Mungkin lebih UI ketika loading kita menampilkan sebuah loading notification, dimana itu memberitahukan bahwa halaman masih proses load.

Pada bahasan kali ini akan di bahas cara membuat load image ketika halaman diload, konsepnya kita mempunya sebuah gambar gif, dimana ketika halaman masih loading, gambar tersebut akan ditampilkan dan ketika halaman tersebut selesai diload maka gambar akan menghilang dan konten page akan ditampilkan, berikut sample code nya

demo download

INDEX.HTML

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript">
  function onReady(callback) {
      var intervalID = window.setInterval(checkReady, 1000);
      function checkReady() {
          if (document.getElementsByTagName('body')[0] !== undefined) {
              window.clearInterval(intervalID);
              callback.call(this);
          }
      }
  }
  function show(id, value) {
      document.getElementById(id).style.display = value ? 'block' : 'none';
  }
  onReady(function () {
      show('page', true);
      show('loading', false);
  });
 </script>
 <style type="text/css">
  body {
      background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
      font-family:"Brush Script MT", cursive;
  }
  h1 {
      font-size: 2em;
      margin-bottom: 0.2em;
      padding-bottom: 0;
  }
  p {
      font-size: 1.5em;
      margin-top: 0;
      padding-top: 0;
  }
  #page {
      display: none;
  }
  #loading {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100vw;
      height: 100vh;
      background-color: rgba(192, 192, 192, 0.5);
      background-image: url("loading.gif");
      background-repeat: no-repeat;
      background-position: center;
  }
 </style>
</head>
<body>
<div id="page">
     <h1>The standard Lorem Ipsum passage</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="loading"></div>
</body>
</html>