Membuat Animasi Loading halaman web

rtx Agustus 23, 2024

 

1. HTML - Struktur Dasar

Tambahkan div untuk preloader di dalam tag <body>:

html
<div id="preloader">
    <div class="spinner"></div>
</div>

<!-- Konten website Anda -->
<div id="content" style="display: none;">
    <!-- Konten halaman web -->
</div>

2. CSS - Gaya untuk Preloader

Tambahkan gaya untuk preloader di file CSS Anda:

css
/* Preloader */
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #fff; /* Background putih atau sesuai keinginan */
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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

3. JavaScript - Menghilangkan Preloader Setelah Load

Tambahkan script ini di bagian bawah sebelum </body> atau di file JavaScript terpisah:

javascript
window.addEventListener('load', function () {
    document.getElementById('preloader').style.display = 'none';
    document.getElementById('content').style.display = 'block';
});

Cara Kerja

  1. Preloader: Ketika halaman mulai dimuat, #preloader akan tampil dengan animasi loading.
  2. Konten Tersembunyi: Konten utama di dalam #content disembunyikan dengan display: none; hingga semua elemen selesai dimuat.
  3. Menghapus Preloader: Setelah halaman selesai dimuat (load event), preloader dihilangkan dan konten halaman ditampilkan dengan mengubah display menjadi block.

4. Opsional: Menambahkan Animasi Fade-Out

Anda juga bisa menambahkan efek fade-out untuk preloader saat menghilang:

css
#preloader.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}

Dan di JavaScript:

javascript
window.addEventListener('load', function () {
    document.getElementById('preloader').classList.add('fade-out');
    setTimeout(function () {
        document.getElementById('preloader').style.display = 'none';
        document.getElementById('content').style.display = 'block';
    }, 500); // 500ms sesuai dengan durasi fade-out
});

Dengan cara ini, halaman Anda akan memiliki preloader yang menjaga pengalaman pengguna tetap halus dan memastikan bahwa halaman hanya ditampilkan setelah semua elemen selesai dimuat.

TRANSLATE this Page
Tags:

Posting Komentar

0 Komentar

Posting Komentar