Cara Membuat Animasi Loading Page dengan HTML, CSS, dan JavaScript
Cara Membuat Animasi Loading Page Tutorial ini menunjukkan cara membuat animasi pemuatan halaman sederhana menggunakan CSS, HTML, dan JavaScript. Termasuk aturan keyframe, CSS, HTML, dan contoh penggunaan fungsi javascript yang bekerja sesuai aturan.
Animasi loading dapat membantu mencegah jenis pantulan dan memberikan pengalaman pengguna (UX) yang jauh lebih baik dengan memberi tahu orang-orang bahwa permintaan mereka telah diterima dan sedang diproses. Meskipun beberapa pembuat situs web atau tema akan menawarkan fitur animasi bawaan, Anda dapat membuatnya sendiri menggunakan CSS atau JavaScript.
Artikel ini akan mengajarkan Anda cara menampilkan animasi loading atau progress bar ke website. Jangan khawatir apakah Anda baru mengenal CSS, HTML, dan Javascript atau ingin membuat situs web Anda lebih ramah pengguna dengan menggunakan animasi pemuatan halaman. Saya akan memandu Anda melalui proses pembuatan animasi loading dengan HTML, CSS, dan JavaScript.
Baca juga : Cara Membuat Tombol Animasi Loading Interaktif dengan HTML, CSS, dan JavaScript: Panduan Praktis
Apa itu Animasi Loading?
Animasi Loading adalah elemen antarmuka pengguna yang memberi tahu pengguna bahwa situs web sedang memproses data dan tidak mogok. Saat halaman dimuat, pengunjung dihibur oleh animasi yang menarik sebelum menuju ke halaman.
Beberapa animasi memiliki bilah kemajuan yang menunjukkan berapa lama waktu yang dibutuhkan untuk memuat data atau konten. Pemberitahuan yang meyakinkan pengguna bahwa sistem masih menangani permintaan mereka. Ketika pengguna mengklik tautan atau tombol, animasi ditampilkan hingga proses pemuatan selesai.
Ada banyak alat berbeda yang dapat membuat animasi pemuatan. Namun, salah satu yang paling praktis adalah menggunakan HTML, CSS, dan juga JavaScript. Lingkaran berkedip atau garis bergerak yang mencerminkan waktu pemuatan adalah contoh umum pemuatan.
Examples of CSS Loading Animations
Ada berbagai animasi loading yang dapat Anda buat dengan CSS. Berikut adalah jenis yang paling umum, dengan beberapa contoh masing-masing.
1. CSS Loading Spinner
CSS Loading Spinner menunjukkan bahwa halaman sedang dimuat sebagai animasi yang bergerak di sepanjang trek melingkar. Animasi akan berlanjut di trek melingkar ini hingga halaman dimuat.
Properti pengaturan waktu animasi dari pemintal pemuatan di bawah ini diatur ke "ease-in-out", yang berarti memiliki awal yang lambat dan akhir yang lambat.
2. Circular Loading Animation
Menentukan animasi pemuatan menunjukkan berapa lama waktu yang dibutuhkan halaman untuk memuat. Ini mungkin menawarkan persentase atau angka tertentu, tetapi tidak harus. Mereka juga dapat berupa perkiraan visual seperti lingkaran yang digambar atau batang yang diisi.
Disini saya telah menentukan perubahan gaya yang akan terjadi dengan persen. Kemudian properti transform digunakan untuk memutar pemintal di dalam batas.
3. Loading Line
Loading line adalah jenis animasi pemuatan tertentu. Mereka linier daripada melingkar, dan sering memberi tahu pengguna berapa banyak waktu yang tersisa sebagai persentase, volume, atau pecahan.
Berikut ini Contoh Progress Bar dengan Kode:
4. Skeleton Screen
Skeleton Screen dimulai sebagai halaman kosong dengan tempat penampung untuk konten yang akan Anda lihat. Elemen-elemen tersebut secara bertahap terungkap hingga halaman terisi penuh.
Berikut ini contoh skeleton screen dengan kode:
Cara Membuat Animasi Loading Sederhana di CSS
Sangat mudah untuk membuat animasi pemuatan CSS sederhana. Mari kita jelajahi untuk Cara Membuat Page Loader Menggunakan HTML dan CSS.
Pertama, tambahkan div dalam HTML dan definisikan dengan nama kelas "loader".
<div class="loader"></div>
Selanjutnya, gunakan pemilih kelas CSS .loader untuk menyesuaikan animasi pemuatan CSS Anda. Anda dapat menentukan beberapa properti, seperti yang ditunjukkan dalam aturan yang ditentukan di bawah ini.
Saya akan jelaskan bagaimana masing-masing properti bekerja dari keterangan di bawah ini.
- CSS margin property diatur ke "otomatis" untuk memusatkan pemuat pada halaman.
- CSS border property mendefinisikan ukuran, gaya, dan warna perbatasan loader (yang muncul sebagai trek melingkar yang "pita" oranye bergerak).
- CSS border-radius property diatur ke 50% membuat loader menjadi lingkaran.
Properti border-top mendefinisikan ukuran, gaya, dan warna dari loader itu sendiri ("pita" oranye). Perhatikan bahwa ia memiliki ukuran dan gaya yang sama dengan perbatasan — hanya warnanya yang berbeda. Anda juga dapat menentukan properti border-bottom, border-right, dan border-left. Menyetel properti border-bottom akan menambahkan "pita" pemintalan terpisah. Mengatur properti border-right atau -left akan memperpanjang satu pita.
Properti lebar dan tinggi menentukan ukuran animasi pemuatan (seluruh lingkaran).
Terakhir, properti animasi mendefinisikan nama, durasi, waktu, dan iteration account . Dalam contoh ini, pemintal diatur untuk bergerak dengan kecepatan yang sama dari awal hingga akhir selama 4 detik, dan berputar tanpa batas.
Satu-satunya yang tersisa untuk dilakukan adalah mengatur bingkai kunci animasi Anda. Ini akan menjelaskan bagaimana loader harus merender pada waktu tertentu selama urutan animasi. Pastikan untuk menggunakan nama animasi yang ditentukan dalam properti animasi (dalam hal ini, "spinner.")
Hanya dua bingkai kunci yang didefinisikan dalam contoh ini. Yang pertama terjadi pada 0% atau momen pertama dari urutan animasi. Loader dikonfigurasi untuk diputar 0 derajat. Keyframe kedua terjadi pada 100% (yaitu momen terakhir dari urutan animasi). Loader dikonfigurasi untuk diputar 360 derajat, sehingga "pita" dimulai di bagian atas lingkaran dan menyelesaikan rotasi penuh selama empat detik.
Dan itu saja. Tapi ingat, animasi pemuatan CSS Anda tidak harus sesederhana itu. Seperti semua hal CSS, imajinasi Anda mengontrol kemungkinan.
CSS Loading Animation Best Practices
Animasi pemuatan harus dipertimbangkan dengan cermat dalam hal bagaimana mereka dapat memengaruhi pengalaman pengguna. Jadi, pertimbangkan tips berikut untuk membuat animasi pemuatan CSS yang efektif.
1. Animasi pemuatan terbaik membutuhkan waktu paling sedikit.
Tidak peduli seberapa lucu animasi kucing berputar Anda, pengguna akan menjadi tidak sabar jika berlangsung terlalu lama. Ingatlah harapan pengguna Anda dan pastikan animasi Anda membutuhkan waktu sesedikit mungkin. Pengguna akan lebih menghargai waktu pemuatan cepat daripada pemintal cantik.
2. Meringankan rasa sakit menunggu.
Jika Anda memberi pengguna sesuatu yang menarik untuk dilihat, penantiannya tidak akan terlalu menyiksa. Animasi yang menarik akan menarik perhatian dan membuat pengguna sibuk.
3. Animasi Anda adalah bagian dari merek Anda.
Meskipun ini bukan tempat untuk kampanye pemasaran, penting untuk menjaga loader Anda tetap pada merek. Gunakan palet dan nada suara perusahaan Anda untuk tetap konsisten dengan merek Anda.
4. Beri tahu pengguna alasan menunggu.
Tidak selalu jelas mengapa pengguna harus menunggu dan memberi tahu mereka dapat mengurangi gesekan selama waktu tunggu. Anda tidak perlu terlalu spesifik, sebaliknya, pernyataan sederhana seperti, "harap tunggu sementara kami mempersiapkan Anda" atau "tunggu sementara kami mengambil dokumen yang baru saja Anda buat" berfungsi dengan baik.
5. Berikan perkiraan waktu tunggu.
Perkiraan waktu menetapkan harapan dan membantu pengguna menunggu dengan sabar. Anda dapat menunjukkan perkiraan ini sebagai persentase atau sebagai representasi visual dari kemajuan.
Download Animasi Loading
Download source code animasi loading page dengan HTML CSS dan JavaScript melalui tombol download di bawah ini.
Anda bahkan dapat menggunakan beberapa pemuat halaman dari kode sumber yang tersedia di sini. Saya akan membagikannya secara gratis sebagai bahan belajar baik untuk saya maupun teman-teman agar saya dapat memberikan ilustrasi yang praktis.
Kesimpulan
Animasi Loading Page dengan HTML, CSS, dan JavaScript ini dapat membantu pengguna bersabar dengan alat atau situs web Anda. Ini memberi tahu mereka bahwa sistem tidak mogok, memberi tahu mereka berapa lama waktu yang dibutuhkan untuk memuat halaman, dan menjaga perhatian mereka dengan menyediakan sesuatu untuk dilihat. Bagian terbaik? Sangat mudah untuk membuat animasi pemuatan dengan beberapa pengetahuan desain web dasar.
Saya harap artikel ini akan membantu Anda dalam membuat pemuat halaman. Pemuat halaman membantu membuat situs Anda lebih responsif dan membuat pengunjung tetap terhibur dengan menampilkan animasi kepada mereka. Animasi CSS dapat mengurangi beban browser karena tidak memerlukan permintaan gambar, tidak seperti GIF.
Demikian posting kali tentang Membuat Preloader dengan Javascript dan CSS di HTML. Semoga alat ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
