Cara Membuat Halaman Loading (Preload) pada Website dengan HTML, CSS, dan JQuery

Apa itu Loading Page ?

Mengapa Loading Page diperlukan pada website?

• Mengalihkan perhatian user dari tampilan-tampilan kurang nyaman untuk dilihat user.
• Mengalihkan perhatian user dari tampilan pemuatan proses yang tidak perlu dipahami user.
• Memberikan informasi sekaligus hiburan pada user ketika menunggu proses pemuatan berlangsung.

• Website
• Aplikasi / Software
• Sistem Operasi
• Game
• Video Streaming
• dan lain-lain

Langkah-Langkah Pembuatan Loading Page pada Website

————————————————————————————————————————-

1. Pertama silahkan persiapkan alat text editor, jika belum ada silahkan download pada link berikut :
   Notepad++, Sublime Text, atau VSCode.
2. Selanjutnya silahkan membuat file baru atau anda juga dapat menggunakan project website atau project HTML yang akan anda tambahkan loading page.
   Pada tutorial kali ini saya akan menggunakan kerangka HTML dari bootstrap berikut ini :  
   Berikut penjelasan dari hasil source code HTML di atas :
   Gambar source code kerangka HTML dan hasil interpretasinya
3. Selanjutnya Perhatikan Gambar source code dari kerangka HTML di atas, saya telah memberikan angka dibagian mana saja yang perlu ditambahkan code HTML, JS, dan CSS. Selanjutnya silahkan copykan source code di bawah ini sesuai dengan angka pada comment yang tertera pada gambar diatas. Berhubung pada source code HTML diatas menggunakan Bootstrap maka panggil terlebih dahulu Bootstrap dan JQuerynya. Namun jika website anda tidak menggunakan bootstrap anda tidak perlu menambahkan-nya.

   Penggunaaan Bootstrap dan JQuery

   Untuk penggunaan Bootstrap dan JQuery anda dapat mendownload nya atau mengakses versi online nya dari situs resminya, anda dapat mengakses nya melalui link berikut :

   Bootstrap : CDN | download
   JQuery  : CDN | download

   Pada tutorial kali ini saya menggunakan yang versi online (CDN) berikut :

   1. Memasang CSS : Bootstrap

   CSS Bootstrap perlu digunakan karena mendukung styling pada kerangka HTML, dengan begitu tampilan halaman website akan bagus. Silahkan copy code dibawah ini kemudian paste di bagian sintax comment no.1 sesuai dengan gambar di atas.

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

   2. Memasang Javascript : JQuery

   Jquery adalah library yang mendukung penggunaan Javascript dari bootstrap. Untuk JQuery wajib dipanggil karena source code javascript yang kami gunakan bekerja bergantung dengan JQuery. Silahkan copy code dibawah ini kemudian paste di bagian sintax comment no.2 sesuai dengan gambar di atas.

   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

   3. Memasang Javascript : Bootstrap

   Javascript : Bootstrap digunakan untuk memanggil function pada javascript bootstrap. Silahkan copy code dibawah ini kemudian paste di bagian sintax comment no.3 sesuai dengan gambar di atas.

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

   
   Gambar source code kerangka HTML setalah memanggil source code Bootstrap dan JQuery

4. Selanjutnya menambahkan Loading Page
   4. HTML Loader 
   Berikut source code HTML untuk halaman loading page. Pada source code berikut ini terdapat
   class=”loader” yang digunakan untuk menginisialisasi loader, dan

   class=”textLoader”
   yang digunakan untuk mengatur posisi text “Please Wait …” pada halaman loading.

   Loading Page yang menampilkan animasi loader pada dasarnya hanyalah sebuah layer yang diletakkan di paling atas ketika suatu content suatu halaman sedang dimuat.
     
5. Kemudian mengkostum tampilan Loading Page dan animasi Loader
   5. CCS Loader
   Berikut source code CSS yang digunakan untuk untuk tampilan loader dan mengkostum tampilan modal menjadi full screen. Silahkan copy code dibawah ini kemudian paste di bagian sintax comment no.5 sesuai dengan gambar diatas.
   Jika anda ingin memanipulasi tampilan loader dapat dilakukan dengan mengkostum css .loader di atas.

6. Menambahkan JavaScript untuk mengendalikan Modal Bootstrap
   6. JS Loader
   Javascript berikut digunakan untuk mengendalikan waktu delay seberapa lama loader akan ditampilkan. Silahkan copy code dibawah ini kemudian paste di bagian sintax comment no.6 sesuai dengan gambar diatas.
   Pada source code javascript diatas tertera
   var delay = 10000; adalah command yang mendeklarasikan variable delay sebelum content dari website tampil (akan menampilkan loader) selama 10 detik.

   Atau 

   Anda juga dapat menggunakan code javascript berikut ini :

7. Terakhir, jika anda menggunakan code javascript yang ke-2, setelah anda selesai melakukan langkah-langkah di atas selanjutnya, tambahkan attribut onload pada element <body> berikut :
   
<body onload="loader()">
   Untuk memangil function loader() pada javascript ketika element body sedang diload.

   

   Gambar Hasil Pembuatan Loading Page / Loading Screen Website

—————————————————————————————————————–

Source

Demo

Tags: Belajar HTML, HTML5, Tutorial CSS, Tutorial HTML, Tutorial JavaScript, Web Design, Web Development