Memuat… Animasi dalam JavaScript Vanilla

Pengantar

Saat mengembangkan situs web dan aplikasi web, menyertakan animasi pemuatan dapat meningkatkan pengalaman pengguna secara signifikan dengan mengomunikasikan apa yang terjadi. Ini melibatkan pengguna dan menjaga perhatian mereka saat memuat konten, dan membantu pengguna memahami apa yang sedang terjadi daripada membiarkan mereka menebak-nebak.

Dalam panduan ini, kita akan melihat cara menggunakan JavaScript Vanilla untuk membuat animasi pemuatan. Kami akan bekerja dengan kedua animasi GIF dan pemuat yang dibuat CSS dan lihat cara menggunakannya dalam dua skenario: memuat konten saat peluncuran aplikasi/situs web atau meminta konten dari API eksternal.

Cara Membuat Pemuat

Ada berbagai cara orang mungkin ingin menampilkan loader mereka. Untuk tujuan panduan ini, kami akan membuat loader yang akan menutupi seluruh layar dan kemudian menghilang saat halaman selesai dimuat. Pertama-tama, kita perlu membuat halaman HTML placeholder:

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

Demi kesederhanaan, kami hanya memiliki dua <div> blok – satu untuk pemuat dan satu untuk konten situs web.

Seperti yang dinyatakan sebelumnya, ikon pemuatan dapat berupa GIF, ikon animasi yang dibuat dengan CSS, atau yang lainnya. Yang penting untuk diingat adalah bahwa pendekatan yang sama berlaku untuk semua jenis ikon pemuatan yang kita gunakan.

Buat Loader Menggunakan GIF

A GIF adalah ikon animasi yang diputar tanpa batas. Satu kali kami telah membuat kami GIF, kami akan menata loader-container div yang akan menampungnya. Ada banyak cara untuk menatanya! Anda bisa menjadi sangat kreatif di sini. Kami hanya akan menambahkan lapisan dengan latar belakang hitam di atas halaman kami di samping ikon, untuk "memblokir" konten pemuatan:

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

Saat kita memuat halaman web kita sekarang, kita akan melihat latar belakang hitam dengan a GIF memuat di tengah layar, mirip dengan ini:

Pada titik ini, kami siap untuk mengimplementasikan pemuatan menggunakan JavaScript. Tapi mari kita lihat juga bagaimana kita bisa menggunakan animasi yang dibuat dengan CSS alih-alih a GIF, yang tidak memerlukan file tambahan untuk diimpor.

Buat Loader Menggunakan CSS

Kami akan membuat ikon yang sama persis dengan CSS. Ingat, kami membuat div tambahan (spinner) di dalam loader-container div dan itulah yang akan kita gunakan untuk mewakili ikon:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

Kode di atas akan membantu kita membuat ikon pemuat CSS yang sekarang dapat kita gunakan div loader-container untuk memusatkan dan menambahkan latar belakang hitam seperti yang kita lakukan sebelumnya:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

Sekarang setelah kita melihat dua jenis pemuat animasi yang tersedia, mari gunakan JavaScript untuk mengontrol kapan animasi pemuatan ini muncul dan menghilang.

Bagaimana Menerapkan Animasi Pemuatan Dengan JavaScript

JavaScript memungkinkan kita untuk memanipulasi struktur HTML kita dan menghapus atau menyembunyikannya loader-container yang saat ini ditampilkan di depan konten situs web. Ada dua pendekatan utama untuk mencapai ini – hanya menyembunyikan loader-container, atau menghapusnya sama sekali.

Pendekatan mana pun yang Anda pilih, langkah pertama adalah menggunakan querySelector() or getElementById() untuk mengambil kembali loader-container sehingga kita dapat memanipulasinya:

const loaderContainer = document.querySelector('.loader-container');

Kedua, kita akan menggunakan eventListener untuk mendengarkan load acara, sehingga memanggil fungsi panggilan balik saat load peristiwa terjadi:

window.addEventListener('load', () => { // ...
});

Menyembunyikan Pemuatan… Elemen

Pendekatan yang paling umum adalah menyembunyikan loader-container dengan display: none sehingga menghilang saat konten terisi penuh.

HTML DOM memungkinkan kita untuk mengubah gaya elemen HTML kita dari JavaScript, dan kode di bawah ini menunjukkan bahwa kita sedang menyetel wadah pemuat display properti ke none sehingga tidak muncul sekali load berhasil:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

Atau, Anda dapat membuat kelas terpisah yang menampung display: none milik:

.loader-container-hidden { display: none;
}

Dan kemudian menggunakan classList.add() untuk menambahkan kelas ke loader-container elemen:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

Menghapus Loading… Elemen

Sejauh ini, kami telah melihat metode utama yang memungkinkan kami menyembunyikan loader-container, menyiratkan bahwa elemen tersebut masih ada, tetapi tersembunyi. Opsi lain adalah menghapus elemen sepenuhnya:

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

Pada titik ini, ketika kita memuat halaman kita, animasi pemuatan akan ditampilkan sampai konten halaman dimuat sepenuhnya.

Menerapkan Memuat Animasi Saat Meminta Konten Eksternal Dari API

Mengambil konten dari API eksternal adalah situasi lain yang mungkin memerlukan penyertaan loader. Jenis konten ini membutuhkan waktu untuk diambil dan ditampilkan, jadi sebaiknya sertakan pemuat.

Dalam kasus kami, mari kita coba untuk mendapatkan kutipan dari a mengutip API menggunakan API Ambil bawaan. Perhatikan bahwa HTML yang kita buat di awal artikel ini memiliki “Hasilkan Kutipan” tombol. Yang harus kita lakukan adalah menggunakan document.querxySelector() metode untuk mendapatkan elemen dan membuat fungsi panggilan balik untuk menangani a click peristiwa yang dipicu ketika pengguna mengklik tombol:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Ini akan berhasil membantu kami mendapatkan kutipan acak ke dalam aplikasi kami, tetapi kami ingin memiliki memuat animasi sehingga pengguna tahu kami mengharapkan konten. Untuk mencapai ini, kami akan membuat dua metode, satu untuk menampilkan loader-container dan yang lainnya untuk menyembunyikannya:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

Pada titik ini, kita akhirnya dapat memasukkan animasi pemuatan ke dalam fungsi panggilan balik. Saat pengambilan dimulai, fungsi panggilan balik akan menampilkan animasi pemuatan dan menyembunyikannya setelah data diterima:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Kesimpulan

Dalam artikel ini, kita telah mempelajari cara menggunakan JavaScript vanilla untuk membuat animasi pemuatan dan menampilkannya dengan tepat. Kami mempertimbangkan berbagai pendekatan untuk mencapai ini dan melihat beberapa kasus penggunaan yang berbeda untuk animasi pemuatan. Kami telah memilih untuk menggunakan lingkaran berputar sebagai pemuat, tetapi Anda dapat mengubahnya dengan cara apa pun yang Anda suka – silakan buat sendiri GIF atau pemuat animasi CSS.

• Coinsmart. Pertukaran Bitcoin dan Crypto Terbaik Eropa.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. AKSES GRATIS.
• CryptoHawk. Radar Altcoin. Uji Coba Gratis.
• Sumber: https://stackabuse.com/loading-animation-in-vanilla-javascript/