htmlcssjavascriptloadinganimasiPemula8 mnt baca

Preloader / Loading Screen

Membangun layar loading animasi yang hilang dengan mulus setelah halaman siap.

Kenapa Preloader?

Saat halaman memuat aset berat, layar putih kosong membuat pengguna mengira web rusak. Preloader memberi tahu "tunggu sebentar, sedang disiapkan" dengan animasi yang menenangkan.

Langkah Membangun

HTML: <div id="preloader"> fixed menutupi seluruh layar berisi spinner/logo beranimasi dan teks "Memuat...".

CSS: Preloader dengan background solid dan z-index tertinggi. Spinner: lingkaran border berputar, atau tiga titik memantul, atau logo berdenyut. Class selesai membuat opacity 0 dengan transisi, lalu display none.

JS: Dengarkan event window load (terpicu setelah SEMUA aset termasuk gambar selesai dimuat, berbeda dengan DOMContentLoaded yang hanya menunggu HTML). Tambahkan jeda minimal (misal 600ms) agar preloader tidak berkedip terlalu cepat, lalu tambah class selesai dan hapus elemen setelah transisi.

load vs DOMContentLoaded

  • DOMContentLoaded: HTML selesai diparsing. Cocok untuk menjalankan logika JS.
  • load: Semua aset (gambar, font) selesai. Cocok untuk menyembunyikan preloader.

Kesalahan Umum

  • Preloader tidak pernah hilang jika satu gambar gagal dimuat (load tetap terpanggil meski gambar error, tapi timeout cadangan tetap disarankan).
  • Preloader terlalu lama hingga mengganggu (maksimal 2-3 detik, tambahkan timeout paksa).
  • Konten di belakang preloader bisa di-scroll (kunci body overflow saat loading).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Preloader Skeleton

Ubah preloader menjadi skeleton screen: alih-alih spinner, tampilkan kerangka abu-abu berbentuk layout halaman (seperti modul loading-skeleton) yang memudar saat konten siap.

Kuis Bab

Uji pemahamanmu: Komponen UI

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Trik CSS apa yang dipakai agar buka-tutup accordion bisa dianimasikan dengan mulus?

2.Properti CSS apa yang sebaiknya dianimasikan agar tidak patah-patah?

3.Bagaimana cara membedakan klik pada overlay modal vs klik di dalam kotak modal?

4.Apa perbedaan toast notification dengan modal?

5.Event apa yang tepat untuk menyembunyikan preloader setelah semua aset dimuat?