Animasi loading dapat digunakan untuk memberi tanda bahwa halaman sedang dipersiapkan. Versi lama artikel ini memakai jQuery 1.7.2 dan GIF eksternal. Versi baru memakai CSS dan JavaScript native tanpa library tambahan.
Catatan UX: loader sebaiknya singkat. Jangan menahan halaman hanya demi animasi karena pengunjung lebih membutuhkan konten yang tampil cepat.
Kode Page Loader Blogger
<div id="mcPageLoader" class="mc-page-loader" aria-hidden="true">
<span class="mc-spinner"></span>
</div>
<style>
.mc-page-loader{
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
background:rgba(15,15,18,.96);
opacity:1;
visibility:visible;
transition:opacity .25s ease,visibility .25s ease;
}
.mc-page-loader.is-hidden{
opacity:0;
visibility:hidden;
}
.mc-spinner{
width:46px;height:46px;
border:4px solid rgba(255,255,255,.22);
border-top-color:#fff;
border-radius:50%;
animation:mcSpin .8s linear infinite;
}
@keyframes mcSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
.mc-spinner{animation:none}
}
</style>
<script>
(function(){
var loader=document.getElementById('mcPageLoader');
function hideLoader(){
if(loader)loader.classList.add('is-hidden');
}
if(document.readyState==='complete'){
hideLoader();
}else{
window.addEventListener('load',hideLoader,{once:true});
setTimeout(hideLoader,4000);
}
})();
</script>
Cara Pasang
- Buka Tema → Edit HTML.
- Backup template terlebih dahulu.
- Tempel elemen loader setelah tag
<body>atau area awal body. - Pastikan CSS dan script ikut ditempatkan satu kali saja.
- Simpan lalu uji di perangkat mobile dan desktop.
Kenapa Versi Ini Lebih Baik?
- Tanpa jQuery.
- Tanpa GIF eksternal.
- Ada fallback timeout agar overlay tidak menutup halaman selamanya.
- Mendukung reduced motion.
- Lebih kecil dan mudah dihapus.
Jika blog sudah sangat cepat, Anda sebenarnya tidak membutuhkan loader. Gunakan hanya jika ada alasan visual atau proses halaman yang memang memerlukan transisi.
0 Comments