Cara Membuat Loading Screen Keren dengan HTML CSS dan JavaScript

Loading screen merupakan tampilan animasi yang muncul saat halaman website sedang memuat data. Selain membuat website terlihat lebih profesional, loading screen juga membantu pengguna mengetahui bahwa halaman masih dalam proses loading sehingga tidak mengira website mengalami error.

Pada tutorial ini kita akan membuat loading screen sederhana namun terlihat modern menggunakan HTML, CSS, dan sedikit JavaScript. Teknik ini bisa digunakan di Blogger, website statis, maupun project web lainnya.

Membuat Struktur HTML Loading Screen

Pertama, kita buat struktur HTML untuk elemen loading. Letakkan kode berikut di bagian atas halaman website Anda.

<div id="loading-screen">
  <div class="loader"></div>
</div>

Elemen tersebut berfungsi sebagai lapisan loading yang akan menutupi halaman hingga proses loading selesai.

Menambahkan CSS Animasi Loading

Selanjutnya tambahkan CSS berikut untuk membuat tampilan loading lebih menarik.

#loading-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #ddd;
  border-top: 5px solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

CSS di atas membuat animasi lingkaran berputar yang sering digunakan sebagai indikator loading modern.

Menambahkan JavaScript untuk Menghilangkan Loading

Setelah halaman selesai dimuat, loading screen harus otomatis hilang. Gunakan script berikut sebelum tag penutup </body>.

<script>
window.addEventListener("load", function(){
  document.getElementById("loading-screen").style.display = "none";
});
</script>

Script tersebut akan menyembunyikan loading screen setelah seluruh halaman selesai dimuat.

Tips Membuat Loading Screen Lebih Keren

Agar tampilan loading screen terlihat lebih profesional, Anda bisa melakukan beberapa modifikasi berikut:

• Mengganti warna background sesuai warna tema website
• Menambahkan logo website di tengah animasi
• Menggunakan animasi CSS tambahan seperti fade out
• Mengubah bentuk loader menjadi dots atau progress bar

Contoh efek fade out saat loading selesai:

#loading-screen.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

Kemudian ubah script JavaScript menjadi:

window.addEventListener("load", function(){
  document.getElementById("loading-screen").classList.add("fade-out");
  setTimeout(function(){
    document.getElementById("loading-screen").style.display = "none";
  }, 500);
});

Kesimpulan

Loading screen merupakan elemen kecil namun memiliki dampak besar terhadap pengalaman pengguna. Dengan menggunakan HTML, CSS, dan JavaScript sederhana, Anda sudah bisa membuat loading screen modern yang ringan dan cepat. Teknik ini sangat cocok digunakan pada blog Blogger, landing page, maupun website tools agar terlihat lebih profesional dan responsif.