Tutorial Membuat Animasi Loading Saat Blog Di Buka

anaksmanda.com - Pernahkah kalian membuka sebuah blog dan melihat animasi loading sebelum seluruh halaman tampil? Efek ini disebut preloader, yaitu tampilan sementara yang memberi tahu pengunjung bahwa halaman sedang dimuat. Pada tutorial ini, kita akan membuat animasi loading blog dengan HTML, CSS, dan JavaScript tanpa bergantung pada jQuery atau pustaka eksternal yang sudah usang.

Animasi loading dapat menjadi indikator visual saat halaman sedang diproses. Namun, preloader yang menutupi layar terlalu lama justru dapat mengganggu pengunjung. Karena itu, contoh di artikel ini dibuat sederhana dan akan menghilang setelah browser menyelesaikan pemuatan dokumen serta aset yang diperlukan.

Apa Itu Animasi Loading Blog?

Animasi loading atau preloader adalah elemen antarmuka yang ditampilkan sementara ketika sebuah halaman sedang dimuat. Bentuknya bisa berupa lingkaran berputar, bilah progres, atau persentase angka.

Versi yang kita buat menggunakan layar penutup, indikator berputar, dan teks pemuatan. Implementasi ini tidak mengukur persentase pemuatan semua sumber daya secara akurat; indikatornya bersifat visual. Jika pengunjung menonaktifkan JavaScript, konten blog tetap dapat diakses karena halaman tidak dibuat bergantung pada animasi.

Preview Animasi Loading

Kalian bisa melihat contoh animasi berikut dengan menekan tombol Pratinjau Loading. Efek hanya ditampilkan pada kotak demo dan tidak menutupi seluruh halaman artikel.

Cara Membuat Animasi Loading di Blogger

Ikuti langkah-langkah berikut untuk memasang preloader pada template Blogger. Sebelum mengedit template, sebaiknya unduh cadangan template terlebih dahulu agar kalian dapat memulihkannya jika terjadi kesalahan.

1. Buka Dashboard Blogger

Masuk ke Blogger.com, pilih blog yang ingin kalian edit, lalu buka menu Tema.

2. Cadangkan Template

Sebelum mengubah kode, buat cadangan tema melalui menu pencadangan yang tersedia di Blogger. Langkah ini penting untuk mengantisipasi kesalahan sintaks.

3. Edit HTML Tema

Pilih opsi untuk mengedit HTML tema. Gunakan pencarian browser atau editor untuk menemukan tag </head>, </body>, dan </b:skin>. Struktur setiap template dapat berbeda.

Kode CSS Animasi Loading

Tambahkan CSS berikut sebelum tag </b:skin>. Kode ini mengatur layar penutup, lingkaran animasi, dan teks loading.

/* Tampilan layar loading */ #blog-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: #000; color: #fff; transition: opacity .3s ease, visibility .3s ease; } #blog-preloader .loader-spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,.25); border-top-color: #ff530d; border-radius: 50%; animation: blogLoaderSpin .8s linear infinite; } #blog-preloader .loader-text { font-family: Arial, sans-serif; font-size: 14px; letter-spacing: .5px; } #blog-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes blogLoaderSpin { to { transform: rotate(360deg); } }

Kode HTML Preloader

Letakkan HTML berikut tepat setelah tag pembuka <body> pada template. Pada beberapa tema Blogger, tag body memiliki atribut khusus. Jangan menghapus atribut yang sudah ada; cukup sisipkan elemen preloader setelah tag tersebut.

<div id="blog-preloader" role="status" aria-live="polite"> <div class="loader-spinner" aria-hidden="true"></div> <div class="loader-text"> Memuat halaman... </div> </div>

Kode JavaScript untuk Menutup Loading

Letakkan kode berikut sebelum tag penutup </body>. Skrip akan menyembunyikan preloader ketika browser memicu peristiwa load, yaitu setelah dokumen beserta sumber daya yang bergantung padanya selesai dimuat.

<script> (function () { function hideBlogPreloader() { var preloader = document.getElementById('blog-preloader'); if (preloader) { preloader.classList.add('is-hidden'); } } if (document.readyState === 'complete') { hideBlogPreloader(); } else { window.addEventListener('load', hideBlogPreloader); } // Pengaman jika pemuatan terlalu lama. window.setTimeout(hideBlogPreloader, 8000); })(); </script>

Cara Mengatur Warna Loading

Kalian dapat mengubah tampilan preloader melalui kode CSS:

• Warna latar layar: ubah nilai background: #000; pada #blog-preloader.
• Warna lingkaran: ubah nilai border-top-color: #ff530d;.
• Ukuran lingkaran: sesuaikan nilai width dan height.
• Teks loading: ganti tulisan Memuat halaman... pada HTML.

Hal yang Perlu Diperhatikan

• Jangan membuat loading terlalu lama. Pengunjung harus tetap bisa mengakses konten secepat mungkin.
• Perhatikan kecepatan blog. Preloader hanya menutupi halaman dan tidak mempercepat pemuatan sebenarnya.
• Uji di ponsel dan desktop. Pastikan tidak ada masalah tampilan pada berbagai ukuran layar.
• Hindari ketergantungan pada pustaka lama. Kode ini tidak menggunakan jQuery 1.5 atau skrip Query Loader dari Google Code.
• Perhatikan JavaScript. Jika skrip gagal berjalan, elemen loading dapat tetap terlihat. Karena itu, uji dengan cermat sebelum menerapkan pada blog utama.

Baca Juga

Kesimpulan

Animasi loading dapat ditambahkan ke Blogger menggunakan HTML, CSS, dan JavaScript sederhana. Dengan menggunakan kode tanpa dependensi eksternal, kalian tidak perlu lagi mengandalkan pustaka Query Loader lama. Pastikan animasi segera menghilang setelah pemuatan selesai dan tidak menghambat pengunjung dalam membaca isi blog.

Sebelum menyimpan perubahan, cadangkan template terlebih dahulu dan uji hasilnya pada beberapa halaman. Ingat, preloader adalah elemen visual, bukan cara untuk meningkatkan kecepatan situs. Optimasi gambar, skrip, dan elemen halaman tetap menjadi langkah utama untuk mempercepat blog.