Cara Membuat Loading Screen di HTML & CSS

HTML:

<div class='loading'>
  <div class='loading-bar'></div>
</div>

CSS:

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
}

.loading-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 5px;
  background-color: #000;
  animation: loading-animation 1s ease-in-out infinite;
}

@keyframes loading-animation {
  0% {
    width: 0%;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

Keterangan:

• Tag '
  ' dengan class 'loading' digunakan untuk menampilkan background putih pada halaman dan menutup tampilan halaman.
• Tag '
  ' dengan class 'loading-bar' digunakan untuk menampilkan loading bar pada tengah halaman.
• CSS 'position: fixed' digunakan untuk membuat elemen selalu berada pada posisi yang sama di layar, bahkan saat halaman di-scroll.
• CSS 'z-index' digunakan untuk menentukan urutan tumpukan elemen. Semakin besar nilai z-index, semakin tinggi elemen tersebut berada di atas elemen lain.
• CSS 'transform: translate(-50%, -50%)' digunakan untuk memposisikan elemen di tengah layar secara horizontal dan vertikal.
• CSS 'animation' digunakan untuk menambahkan animasi pada elemen. Pada contoh di atas, animasi loading bar akan berulang selama 1 detik dengan efek ease-in-out.