Tutorial Cara Membuat Loading Screen Kustom di Website Dengan Mudah Terbaru 2024

Cara Membuat Loading Screen Kustom di Website

Ketika mengunjungi sebuah website, terkadang kita harus menunggu beberapa detik hingga halaman tersebut sepenuhnya dimuat. Daripada membiarkan pengguna menatap layar kosong, kita bisa membuat loading screen kustom yang akan muncul sebelum halaman sepenuhnya siap. Tutorial ini akan membantu kamu membuat loading screen yang interaktif dengan HTML, CSS, dan JavaScript.

Langkah-langkah

1. Struktur HTML

Kita akan membuat elemen dasar untuk loading screen dan konten utama di dalam halaman. Berikut ini adalah kode HTML-nya:

    
<!-- Loading Screen -->
<div id="loading-screen">
  <div id="loading-animation"></div>
</div>

<!-- Konten Utama -->
<div id="content">
  <h1>Selamat Datang di Website Saya</h1>
  <p>Konten Anda akan muncul setelah loading selesai.</p>
  <img src="https://res.cloudinary.com/ilhamnjiir/image/upload/v1727516458/QRIS_Statis_IAM_STORE_2_nrjvfg.jpg" alt="Gambar contoh" width="300">
</div>
    
  

2. Animasi Loading

Animasi yang akan kita gunakan adalah animasi lingkaran berputar. Ini bisa dibuat dengan CSS menggunakan @keyframes. Berikut kode CSS untuk menambahkan animasi loading:

    
/* Animasi loading */
#loading-animation {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 80px;
  height: 80px;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
    
  

3. Menghilangkan Loading Screen Setelah Halaman Dimuat

Agar loading screen menghilang saat halaman selesai dimuat, kita akan menggunakan JavaScript. Event window.addEventListener('load') akan mendeteksi kapan halaman selesai dimuat, lalu kita akan menambahkan class loaded pada body untuk menghapus loading screen.

    
<script>
  window.addEventListener('load', function() {
    document.body.classList.add('loaded');
  });
</script>
    
  

4. Menampilkan Konten Setelah Loading

Konten utama kita awalnya akan disembunyikan (dengan opacity: 0;), kemudian secara perlahan muncul setelah loading screen menghilang. Gunakan CSS berikut untuk efek transisi yang halus:

    
/* Konten utama */
#content {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

body.loaded #content {
  opacity: 1;
}
    
  

Kesimpulan

Dengan mengikuti langkah-langkah di atas, kamu telah berhasil membuat loading screen kustom yang interaktif. Ini akan meningkatkan pengalaman pengguna dengan memberikan feedback visual ketika halaman sedang dimuat. Kamu bisa menyesuaikan desain dan animasi sesuai dengan tema situsmu.