CARA MEMBUAT LOADING DENGAN JAVASCRIPT

Dalam pembuatan situs web, salah satu fitur yang sering digunakan adalah efek loading. Efek loading ini penting untuk memberi tahu pengguna bahwa situs web sedang memproses sesuatu dan mencegah mereka menunggu tanpa informasi apa pun. Dalam artikel ini, kita akan belajar cara membuat loading dengan JavaScript sederhana.

Persiapan

Pertama-tama, kamu perlu mengatur lingkungan kerja kamu. Buat file HTML dan JavaScript baru. Kami akan menggunakan HTML untuk struktur dan JavaScript untuk fungsi.

Langkah 1: Buat Struktur HTML

Untuk membuat animasi loading, kamu perlu membuat elemen HTML yang akan menampilkan animasi tersebut. Di bawah ini adalah contoh struktur HTML sederhana:

<div id="loading">
    <span>Loading...</span>
</div>

Elemen div dengan id loading ini akan menjadi tempat kita menampilkan animasi loading. Elemen span di dalamnya adalah tempat kita menampilkan teks ‘Loading…‘.

Langkah 2: Style Elemen Loading

Setelah membuat struktur HTML, kamu perlu memberikan style ke elemen loading untuk membuatnya tampak sebagai animasi loading. Berikut contoh styling yang bisa kamu gunakan:

<style>
#loading {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}

#loading span {
    color: #fff;
    font-size: 30px;
}
</style>

Styling di atas akan membuat elemen loading menampilkan teks ‘Loading…’ dengan latar belakang hitam transparan yang menutupi seluruh halaman.

Langkah 3: Buat Fungsi JavaScript

Sekarang saatnya membuat fungsi JavaScript yang akan menampilkan dan menyembunyikan animasi loading. Berikut contoh kode JavaScript:

function showLoading() {
    document.getElementById('loading').style.display = 'flex';
}

function hideLoading() {
    document.getElementById('loading').style.display = 'none';
}

Fungsi showLoading akan menampilkan animasi loading dengan mengubah nilai display dari elemen loading menjadi ‘flex’. Sedangkan fungsi hideLoading akan menyembunyikan animasi loading dengan mengubah nilai display dari elemen loading menjadi ‘none’.

Kesimpulan

Dengan langkah-langkah sederhana di atas, kamu dapat membuat animasi loading dengan JavaScript. Perlu diingat bahwa mengatur waktu dan kondisi untuk menampilkan dan menyembunyikan animasi loading tergantung pada situasi aplikasi kamu. Meskipun efek loading ini sederhana, namun dapat memberikan peningkatan pada User Experience (UX) situs web kamu.