Preloader Animation

Yanuar Zhaldy Gemilang Addson Juni 15, 2025

0

"Preloader website adalah elemen visual, seperti animasi atau indikator loading (contohnya spinner), yang muncul saat halaman web sedang load konten."

Details

Preloader website adalah elemen visual, seperti animasi atau indikator loading (contohnya spinner), yang muncul saat halaman web sedang memuat konten. Fungsinya memberikan feedback kepada pengguna, meningkatkan pengalaman pengguna (UX), dan mengurangi kesan lambat saat memuat.

Code

CSS

#loader { padding: 0; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffffff; display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 1; transition: all 0.5s ease-in-out; }
.spinner { border: 10px solid #f3f3f3; border-top: 10px solid #3498db; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

HTML

<div id='loader'>
  <div class='spinner'/>
</div>

JavaScript

setTimeout(function () { document.getElementById('loader').style.opacity = '0'; document.getElementById('loader').style.zIndex = '-1'; }, 1000);