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

SkyLight Animation 4/04/2020

Pada kesempatan kali ini saya akan berbagi tutorial salah satu cara untuk membuat loading page / preload page / loading screenpada website menggunakan (HTML dan CSS) pada Bootstrap dan JQuery. Tutorial kali ini hanyalah salah cara karena selain cara ini terdapat banyak variasi cara untuk membuat loading page atau mungkin dapat dikembangkan sesuai dengan tema dari website yang anda kembangkan.

Apa itu Loading Page ?

Loading Page berasal dari 2 kata dalam bahasa Inggris yaitu Loading yang artinya proses memuat dan Page yang artinya halaman, jadi loading page dapat diartikan sebagai halaman yang memberikan informasi pada user ketika suatu konten pada website atau aplikasi sedang dimuat. Loading page memiliki beberapa istilah lain yaitu loading screen,preload, loader, atau loader page, splash screen dan lain sebagainya.

Mengapa Loading Page diharapkan pada website?

Suatu website yang dapat diakses melalui internet biasanya membutuhkan waktu atau delay untuk memuat semua konten-kontennya misalkan teks, huruf, angka, source code, file berupa gambar, document, video, dll.

Untuk memuat teks / karkter, & source code bisa diinterpretasikan dengan cepat lantaran berukuran tiap characternya yg relatif kecil, namun jika jumlahnya mencapai ratusan jutaan maka pula akan memakan waktu. Untuk memuat arsip-file berupa gambar, document, video umumnya memakan waktu yg relatif lama karena ukuran filenya yg nisbi besar , dan apabila koneksi internet nir stabil maka akan memperlambat proses buat memuat suatu halaman website.

Dari uraian masalah diatas dengan menerapkan loading page dapat diketahui beberapa fungsinya :

  • 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.

Loading page pada umumnya diterapkan pada beberapa produk digital misalkan :

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

Pada tutorial ini loading page dapat diterapkan pada website, aplikasi berbasis website dan game yang dapat berjalan di platform web browser.

Langkah-Langkah Pembuatan Loading Page pada Website

Berikut ini adalah step by step untuk membuat loading page pada website menggunakan HTML, CSSdan JQuery :

Sebelumnya aku telah menerapkan metode pembuatan laoding page berikut pada game Aksara Jawa?& game berbasis website semacam ular tangga.--------

  1. Pertama silahkan persiapkan alat text editor, jika belum ada silahkan download pada link berikut :

    Notepad++ , Sublime Text , atau VSCode .

  • 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

  • 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 & JQuery

    Untuk penggunaan Bootstrap & JQuery anda bisa mendownload nya atau mengakses versi online nya dari situs resminya, anda dapat download

    Bootstrap : CDN | download

    JQuery  : CDN | download

    CSS Bootstrap perlu dipakai lantaran mendukung styling dalam kerangka HTML, menggunakan begitu tampilan laman website akan cantik. Silahkan copy code dibawah ini kemudian paste di bagian sintax comment no.1 sinkron menggunakan gambar di atas.

    <link rel="stylesheet" href="https://maxcdn.Bootstrapcdn.Com/bootstrap/3.3.7/css/bootstrap.Min.Cssdanquot;>

    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">

    <script src="https://code.Jquery.Com/jquery-tiga.4.1.Min.Js"></scriptdangt;

    Jquery adalah library yang mendukung penggunaan Javascript dari bootstrap. Untuk JQuery wajib dipanggil karenasource 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>

    <script src="https://maxcdn.Bootstrapcdn.Com/bootstrap/tiga.3.7/js/bootstrap.Min.Jsdanquot; ></script>

    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

  • Berikut source code HTML buat page loading page. Pada source code ini dia masih ada group="loaderdanquot;?Yg digunakan buat menginisialisasi loader, dan group="textLoader" yg dipakai buat mengatur posisi text "Please Wait ..." pada page loading.
  • Loading Page yang menampilkan animasi loader pada dasarnya hanyalah sebuah layer yg diletakkan pada paling atas ketika suatu content suatu halaman sedang dimuat.

    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.

  • Kemudian mengkostum tampilan Loading Pagedan 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.

  • Javascript berikut digunakan buat mengendalikan?Waktu delay seberapa usang loader akan ditampilkan.?Silahkan copy code dibawah ini lalu paste pada bagian sintax comment no.6 sinkron dengan gambar diatas.
  • Pada source code javascript diatas tertera var delay = 10000; merupakan command yang mendeklarasikan variable delay sebelum content berdasarkan website tampil (akan menampilkan loader) selama 10 dtk.

    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.

  • Terakhir 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.

    Berikut output demo pembuatan loading halaman atau loading screen memakai Bootstrap :

    Sebelumnya aku telah menerapkan metode pembuatan laoding page berikut pada game Aksara Jawa?& game berbasis website semacam ular tangga.

    Berikut output demo pembuatan loading halaman atau loading screen memakai Bootstrap :

    Sebelumnya saya telah menerapkan metode pembuatan laoding page berikut pada game Aksara Jawa dan game berbasis website semacam ular tangga.

    Develop by dkusumandaru .

    Loading page yang kami share ini adalah loading halaman secara basic dengan begitu anda dapat berbagi & mengkustom loading page / loading screen dengan memakai animasi gif, logo & lain sebagainya, sesuai dengan tema webiste anda & impian anda masing-masing.

    Berikut hasil demo pembuatan loading page atau loading screen menggunakan Bootstrap :

    Loading page yang kami share ini adalah loading halaman secara basic dengan begitu anda dapat berbagi & mengkustom loading page / loading screen dengan memakai animasi gif, logo & lain sebagainya, sesuai dengan tema webiste anda & impian anda masing-masing. Loading Page

    Sebelumnya saya telah menerapkan metode pembuatan laoding page berikut pada game Aksara Jawa.

    Loading page yang kami share ini adalah loading page secara basic dengan begitu anda dapat mengembangkan dan mengkustom loading page / loading screen dengan menggunakan animasi gif, logo dan lain sebagainya, sesuai dengan tema webiste anda dan keinginan anda masing-masing.

    4/ lima

    Cara Membuat Halaman Loading (Preload) dalam Website dengan HTML, CSS, & JQuery

    ~ Semoga Bermanfaat ~

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

    4/ 5

    0 Response to "Cara Membuat Halaman Loading (Preload) pada Website dengan HTML, CSS, dan JQuery"

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel