Tambahkan Animasi Pemuatan ke Situs WordPress Anda (10 Opsi Berbeda)

Setiap orang selalu terburu-buru, dan situs web yang memuat lebih dari 2 atau 3 detik dianggap "terlalu lambat". Untungnya, ada cara untuk mengatasi kepanikan itu untuk sementara dan membuat pengguna tetap berada di situs cukup lama untuk memuat sesuatu. Saya sedang berbicara tentang animasi pemuatan hipnosis yang sempurna.

Dalam posting ini, kita akan melihat apa sebenarnya animasi pemuatan, apa tujuannya, dan bagaimana menambahkannya ke situs WordPress mana pun – termasuk situs Divi Anda.

Apa Itu Animasi Memuat?

Animasi pemuatan, juga disebut pra-pemuat, adalah animasi menarik yang muncul di situs web cukup lama untuk memuat semua elemen. Beberapa animasi pemuatan pendek dan tidak perlu menarik perhatian pengguna terlalu lama. Namun dalam beberapa kasus, jika situsnya sangat besar, animasi pemuatan harus benar-benar menawan agar pengguna tetap bertahan.

Jika Anda sudah cukup lama, Anda tahu bahwa memuat animasi telah muncul sejak tahun 90-an. Bahkan di awal era internet, kami telah memuat animasi. Tentu saja saat itu, mereka bisa bertahan lebih lama daripada sekarang. Selain itu, kami telah mempelajari cara membuatnya lebih menyenangkan bagi pengguna tanpa membuat mereka bosan dan menjauh.

Membiasakan Memuat Animasi

Gaya pemuatan animasi yang paling umum adalah lingkaran berputar. Jangan bingung dengan "lingkaran pelangi kematian" dari komputer Apple. Animasi pemuatan lingkaran berputar memiliki gerakan gradien yang terhuyung-huyung. Pra-pemuat pemintalan pertama memiliki banyak versi berbeda, dari bunga, lingkaran, kepingan salju, dan bahkan pemintalan ying yang. Saat ini animasi pemuatan berputar lebih dinamis dan lebih bagus untuk dilihat.

Animasi pemuatan berputar hanya berfungsi jika waktu tunggunya singkat. Lebih dari 5 detik sudah terlalu banyak. Saat itulah pengembang perlu menggunakan pra pemuat yang lebih kreatif. Animasi pemuatan yang menyenangkan dan menghibur akan membuat pengguna tetap berada di situs tidak peduli berapa lama waktu yang dibutuhkan.

Tips Untuk Memuat Animasi Lebih Baik

Ada beberapa hal yang dapat Anda tambahkan ke animasi pemuatan Anda agar lebih menarik daripada sekadar gambar bergerak. Berikut adalah beberapa tips untuk membuatnya lebih baik dan lebih efektif.

• Sertakan bilah persentase
• Tunjukkan berapa lama lagi pengguna harus menunggu
• Jelaskan apa yang terjadi di balik tenda (alat peraga untuk menggunakan humor)
• Gunakan animasi menghibur yang tidak selalu mengulangi tindakan yang sama persis

Manfaat Animasi Pemuatan Bermerek

Jika Anda memiliki kesempatan untuk membuat animasi pemuatan sendiri atau menggunakan plugin dengan opsi penyesuaian, maka pastikan preloader bermerek. Ini bisa sesederhana menggunakan warna situs web merek untuk benar-benar menggunakan ilustrasi perusahaan. Ide di balik branding animasi pemuatan adalah bahwa sepertinya itu milik situs itu dan bukan hanya add-on. Rangkuman di situs web Awwwards ini dapat menginspirasi kreasi Anda sendiri.

Cara Menambahkan Animasi Pemuatan ke Situs WordPress Anda

Menambahkan animasi pemuatan lebih mudah dari yang Anda kira. Ada sejumlah opsi tentang cara menambahkannya ke situs WordPress. Dari plugin yang mudah digunakan hingga menambahkan kode khusus ke situs. Karena ada begitu banyak pilihan yang berbeda, saya akan mencantumkannya di sini sehingga Anda dapat melihat-lihat dan menemukan mana yang paling cocok untuk Anda.

Menggunakan Plugin untuk Menambahkan Animasi Pemuatan

Plugin adalah cara termudah dan paling mudah untuk menambahkan animasi pemuatan. Ini sangat membantu jika Anda tidak merasa nyaman bermain-main dengan kode atau tidak punya waktu. Berikut adalah daftar beberapa plugin paling serbaguna untuk memuat animasi. Beberapa di antaranya gratis dan yang lainnya premium. Dalam beberapa kasus, plugin yang sama memiliki versi gratis yang lebih sederhana dan versi pro yang lebih tangguh.

Pemuat loteng

Loftloader memiliki versi gratis dan pro. Dalam versi gratis Anda dapat mencoba beberapa proloader dan menyesuaikannya agar sesuai dengan situs dan merek. Versi pro memiliki lebih banyak opsi dan kontrol yang lebih terperinci.

Pemuat Datar

Flat Preloader adalah plugin gratis sederhana dengan serangkaian animasi pemuatan warna-warni yang terbatas. Plugin ini sangat cocok jika Anda memerlukan perbaikan cepat untuk preloader dan tidak perlu menyesuaikan warna atau gambar.

Prapemuat terbaik

Best Preloader adalah plugin animasi pemuatan satu opsi gratis yang sesuai dengan gaya situs web apa pun. Saya hadir dengan satu animasi dengan beberapa kontrol kustomisasi.

Pemuat Halaman

Page Loader adalah plugin animasi pemuatan premium dengan banyak opsi penyesuaian dan branding. Ini adalah salah satu plugin pre loader favorit di pasaran.

Preloader Cerdas WP

WP Smart Preloader adalah plugin sumber terbuka dan gratis dengan opsi penyesuaian penuh. Animasinya tidak terlalu rumit tetapi akan cocok dengan gaya situs web apa pun. Anda dapat menyesuaikan warna dan pengaturan dengan cukup mudah.

Menambahkan Animasi Pemuatan Tanpa Plugin

Jika Anda ingin menghindari penggunaan plugin, ada banyak animasi pemuatan gratis dan siap pakai yang tersedia. Serta beberapa tutorial lanjutan yang menyediakan cuplikan kode yang perlu Anda tambahkan.

PixelBuddha dengan Multimedia:

Orang-orang di Multimedia menerbitkan tutorial sederhana dengan dua set animasi pemuatan gratis dari PixelBuddha dan kode yang Anda perlukan untuk mengaturnya di situs Anda.

pena kode:

Artikel Medium oleh UX Planet ini, penulis mengumpulkan banyak animasi pemuatan dalam gaya yang berbeda. Ada yang sederhana dan ada yang lebih kompleks. Sebagian besar disematkan dari CodePen dan Anda bisa mendapatkan cuplikan HTML dan CSS dari widget itu sendiri. Anda harus memasukkan ini ke dalam kumpulan kode lengkap untuk pengaturan animasi pemuatan.

SpinKit:

Tobias Ashlink memiliki SpinKit dengan koleksi animasi pemuatan yang bagus dengan kode yang tersedia melalui GitHub. Ini juga perlu ditambahkan ke set kode lengkap untuk penyiapan pra loaer.

Memuat.io:

Loading.io adalah kumpulan animasi pemuatan dengan banyak opsi berbeda. Ada preloader CSS, preloader GIF, tombol dan banyak lagi. Lihat situs mereka untuk menemukan semua opsi dan petunjuk tentang cara menambahkannya ke situs Anda.

Pixelvars:

Orang-orang adalah Pixelvars menulis tutorial praktis dengan semua kode yang Anda perlukan untuk mengatur animasi pemuatan Anda sendiri. Anda bahkan dapat menggunakan kode mereka bersama dengan animasi CodePen atau GitHub di atas. Opsi ini memang tampak sedikit lebih maju bagi sebagian orang. Ikuti ini jika Anda seorang pengembang dengan pengetahuan pengkodean yang baik.

Dengan Begitu Banyak Pilihan, Mana Yang Akan Anda Pilih?

Menambahkan animasi pemuatan ke situs WordPress itu mudah. Dengan begitu banyak pilihan yang tersedia, itu hanya masalah memilih satu.

Dalam posting ini, kami menunjukkan kepada Anda banyak cara berbeda untuk menambahkan animasi pemuatan ke situs Anda. Yang mana yang merupakan metode pilihan Anda? Dirancang khusus dan ditambahkan dengan kode ke tema anak? Plugin yang dapat disesuaikan? Pilihan sederhana tanpa embel-embel? Beri tahu kami di komentar agar kami dapat memeriksa animasi pemuatan Anda sendiri.

Gambar unggulan melalui muchomoros / shutterstock.com