contact
WA: 0812-7537-1724
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: 5AB31960
ebsofmail@gmail.com

Cara Membuat Loading di Website

Posted in Javascript Jquery Life at 17 Agustus 2016 With 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>
▼ Download Source Code Dibawah Ini ▼


 Nah berikut Hasilnya :

membuat loading di halaman website

Artikel Terkait

Diskusi