{"id":599,"date":"2017-03-31T13:00:11","date_gmt":"2017-03-31T06:00:11","guid":{"rendered":"http:\/\/www.yellowweb.id\/blog\/?p=599"},"modified":"2017-03-31T13:00:37","modified_gmt":"2017-03-31T06:00:37","slug":"membuat-loading-web","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/membuat-loading-web\/","title":{"rendered":"Membuat Loading Web"},"content":{"rendered":"

Halo teman-teman, untuk artikel kali ini kita akan mencoba bagaimana membuat sebuah laman loading web, sebelum menampilkan isi dari konten web tersebut.<\/p>\n

Mungkin kita merasa jenuh ketika kita mengunjungi sebuah situs, sedangkan waktu tunggu atau loading web tersebut sangat lama, dan tentunya yang ada kita akan segera mengclose web yang sedang kita kunjungi tersebut. Bagaimana hal itu jika terjadi di web kita. Kita tidak menginginkan hal tersebut terjadi, mungkin kita bisa memberikan solusinya dengan menambahkan semacam pemberitahuan atau notifikasi.<\/p>\n

Dalam hal ini kita akan memberikan icon loading time, bahwa web tersebut masih dalam status mengisi. Dengan cara seperti ini, pengunjung tahu bahwa web sedang mengisi, karena mereka melihat notifikasi yang sedang kita tampilkan.<\/p>\n

Loading time disini saya menggunakan svg icon yang teman-teman bisa kalian generat secara otomatis disini.<\/a><\/span><\/p>\n

Langsung saja<\/p>\n

<div id=\"page\">\r\n    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.<\/p>\r\n<\/div>\r\n<div id=\"loading\"><\/div><\/pre>\n
bagian tersebut untuk bagian badan web<\/p>\n
Kemudian bagian dibawah ini adalah CSSnya<\/p>\n
 <style type=\"text\/css\">\r\n  body {\r\n     font-size: 14px;\r\n  }\r\n  #page {\r\n      display: none;\r\n  }\r\n  #loading {\r\n      display: block;\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      z-index: 100;\r\n      width: 100vw;\r\n      height: 100vh;\r\n      background-color: rgba(192, 192, 192, 0.5);\r\n      background-image: url(\"default.svg\");\r\n      background-repeat: no-repeat;\r\n      background-position: center;\r\n  }\r\n <\/style><\/pre>\n
dan tentunya kita memerlukan file javascript sebagai pemicunya<\/p>\n
<script type=\"text\/javascript\">\r\n  function onReady(callback) {\r\n      var intervalID = window.setInterval(checkReady, 5000);\r\n      function checkReady() {\r\n          if (document.getElementsByTagName('body')[0] !== undefined) {\r\n              window.clearInterval(intervalID);\r\n              callback.call(this);\r\n          }\r\n      }\r\n  }\r\n  function show(id, value) {\r\n      document.getElementById(id).style.display = value ? 'block' : 'none';\r\n  }\r\n  onReady(function () {\r\n      show('page', true);\r\n      show('loading', false);\r\n  });\r\n <\/script><\/pre>\n
Untuk hasilnya kalian bisa melihat, seperti dibawah ini<\/p>\n