Cara Membuat Loading Screen Blogger dengan Native JavaScript

---

Loading screen atau preloader adalah lapisan visual yang ditampilkan sementara ketika sebuah halaman sedang melakukan proses pemuatan. Bentuknya dapat berupa spinner, progress bar, teks animasi maupun gambar GIF.

Loading screen cukup populer digunakan pada template Blogger karena dapat membuat perpindahan halaman terasa lebih halus, terutama jika halaman mempunyai banyak gambar atau elemen visual yang membutuhkan waktu untuk selesai dimuat.

Namun ada satu hal penting yang perlu dipahami sejak awal: loading screen tidak membuat website menjadi lebih cepat. Preloader hanya menutupi halaman sementara proses loading sebenarnya tetap berlangsung di belakangnya.

Jika implementasinya terlalu berat, loading screen justru dapat membuat pengunjung merasa menunggu lebih lama. Karena itu tutorial versi baru ini menggunakan animasi ringan, native JavaScript tanpa jQuery dan mempunyai timeout pengaman agar preloader tidak pernah menutupi halaman selamanya.

Artikel ini menyediakan beberapa pilihan loader mulai dari GIF klasik, spinner CSS, dual ring, sampai progress line bergaya CodeFlare. Seluruh contoh dapat dicoba melalui live preview sebelum dipasang pada template.

Informasi Singkat

---

Loading screen adalah elemen antarmuka yang ditampilkan sementara ketika halaman atau aplikasi sedang melakukan proses inisialisasi.

Untuk Blogger modern, kita tidak membutuhkan jQuery hanya untuk menjalankan preloader. Native JavaScript sudah cukup menggunakan addEventListener() dan class CSS.

Loading screen sebaiknya ringan, mempunyai fallback timeout dan tidak menghalangi halaman apabila JavaScript gagal berjalan.

DAFTAR ISI

1. Apa Itu Loading Screen?
2. Live Preview Loading Screen
3. Cara Kerja Preloader Modern
4. Loading Screen GIF
5. Loading Screen Spinner CSS
6. Loading Screen Dual Ring
7. Loading Screen Progress Line
8. Kode Final Native JavaScript
9. Cara Memasang di Blogger
10. Pengaturan Loading Screen
11. Kesalahan yang Harus Dihindari
12. Troubleshooting

Apa Itu Loading Screen?

Loading screen atau preloader adalah tampilan sementara yang muncul sebelum konten utama diperlihatkan kepada pengguna.

Pada website, preloader biasanya dibuat menggunakan tiga komponen:

HTML Membuat elemen overlay dan loader.

CSS Mengatur tampilan dan animasi.

JavaScript Menghilangkan loader ketika halaman siap.

Secara sederhana prosesnya:

01 OPEN Halaman dibuka

02 LOADING Preloader tampil

03 READY Resource selesai

04 CONTENT Overlay hilang

Loading Screen Bukan Optimasi Kecepatan

Preloader tidak mengurangi ukuran JavaScript, CSS, gambar atau network request. Untuk mempercepat blog tetap lakukan optimasi gambar, script, font, widget dan resource lainnya.

Live Preview Loading Screen

Gunakan tombol berikut untuk mencoba beberapa gaya loading screen. Preview hanya berjalan di dalam kotak sehingga tidak menutupi seluruh artikel.

LOADING SCREEN LAB LIVE PREVIEW

READY

LOADING Please wait...

CodeFlare Preview Area Pilih loader kemudian tekan Run Preview.

NATIVE JS NO JQUERY

Preview otomatis ditutup setelah beberapa detik sehingga perilakunya mirip dengan preloader sebenarnya.

Cara Kerja Preloader Modern

Kode lama pada artikel ini menggunakan:

$(window).load(function(){ $("#preloader").fadeOut(1000); });

Pada versi modern kita tidak lagi membutuhkan jQuery. Gunakan:

window.addEventListener("load", function(){ hidePreloader(); });

Event load berjalan setelah halaman beserta resource penting seperti stylesheet, script, iframe dan gambar non-lazy selesai dimuat.

Namun kita juga menambahkan timeout:

setTimeout(hidePreloader, 4500);

Tujuannya agar overlay tetap hilang meskipun sebuah resource eksternal lambat atau mengalami masalah.

window.load Menutup loader ketika halaman selesai.

Max Timeout Mencegah overlay terjebak terlalu lama.

No jQuery Tidak menambah dependency hanya untuk fade.

Reduced Motion Mengurangi animasi sesuai preferensi perangkat.

Loading Screen GIF

Pilihan paling mudah adalah menggunakan gambar GIF berukuran kecil.

loading... please wait

Markup:

<div class="cfLoaderGif"> <img alt="" src="URL-GAMBAR-GIF" /> <span>Loading...</span> </div>

Jika menggunakan GIF sendiri, pilih file berukuran kecil. Jangan memasang GIF beresolusi besar hanya untuk icon loading 40–60 pixel.

Loading Screen Spinner CSS

Loading...

Spinner CSS lebih ringan karena tidak membutuhkan file gambar.

<div class="cfLoaderSpinner"> <span></span> <small>Loading...</small> </div>

.cfLoaderSpinner{ display:flex; flex-direction:column; align-items:center; gap:10px; } .cfLoaderSpinner>span{ display:block; width:46px; height:46px; box-sizing:border-box; border:5px solid rgba(255,255,255,.25); border-top-color:#0083da; border-radius:50%; animation:cfLoaderSpin .8s linear infinite; } @keyframes cfLoaderSpin{ to{transform:rotate(360deg)} }

Loading Screen Dual Ring

INITIALIZING

Dual ring mempunyai dua garis dengan arah rotasi berbeda sehingga tampil lebih futuristik.

<div class="cfLoaderDual"> <span></span> </div>

.cfLoaderDual{ position:relative; width:58px; height:58px; } .cfLoaderDual:before, .cfLoaderDual:after{ content:""; position:absolute; inset:0; border:3px solid transparent; border-radius:50%; } .cfLoaderDual:before{ border-top-color:#0083da; border-right-color:#0083da; animation:cfDualA .9s linear infinite; } .cfLoaderDual:after{ inset:8px; border-bottom-color:#f98500; border-left-color:#f98500; animation:cfDualB .7s linear infinite; } @keyframes cfDualA{ to{transform:rotate(360deg)} } @keyframes cfDualB{ to{transform:rotate(-360deg)} }

Loading Screen Progress Line

CODEFLARE SYSTEM LOADING

Versi progress line memberikan tampilan minimalis dan cocok untuk template CodeFlare.

<div class="cfLoaderLine"> <i class="fa fa-code"></i> <b>CODEFLARE</b> <span> <i></i> </span> <small>SYSTEM LOADING</small> </div>

.cfLoaderLine{ width:210px; text-align:center; color:#fff; } .cfLoaderLine>b{ display:block; margin:6px 0; letter-spacing:2px; } .cfLoaderLine>span{ position:relative; display:block; width:100%; height:3px; overflow:hidden; background:rgba(255,255,255,.16); } .cfLoaderLine>span>i{ position:absolute; left:-40%; top:0; width:40%; height:100%; background:#0083da; animation:cfLoadLine 1.1s ease-in-out infinite; } .cfLoaderLine>small{ display:block; margin-top:6px; font-size:9px; letter-spacing:1px; opacity:.7; } @keyframes cfLoadLine{ 0%{left:-40%} 100%{left:100%} }

Kode Final Native JavaScript

Berikut engine utama yang digunakan untuk semua pilihan loader.

Kita pisahkan menjadi tiga bagian: CSS sebelum </head>, HTML tepat setelah <body>, kemudian JavaScript sebelum </body>.

1. CSS sebelum </head>

<style> /* CodeFlare Loading Screen */ #cfPreloader{ position:fixed; z-index:999999; inset:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; background:#111820; color:#fff; opacity:1; visibility:visible; transition: opacity .35s ease, visibility .35s ease; } #cfPreloader.cf-hide{ opacity:0; visibility:hidden; pointer-events:none; } #cfPreloader .cfLoaderInner{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; } #cfPreloader .cfLoaderSpinner{ width:48px; height:48px; box-sizing:border-box; border:5px solid rgba(255,255,255,.18); border-top-color:#0083da; border-radius:50%; animation:cfLoaderSpin .8s linear infinite; } #cfPreloader .cfLoaderText{ font-size:11px; letter-spacing:1px; opacity:.8; } html.cf-preloading, html.cf-preloading body{ overflow:hidden; } @keyframes cfLoaderSpin{ to{ transform:rotate(360deg); } } @media(prefers-reduced-motion:reduce){ #cfPreloader, #cfPreloader .cfLoaderSpinner{ transition:none; animation:none; } } </style> <noscript> <style> #cfPreloader{ display:none!important; } </style> </noscript>

2. HTML setelah <body>

<div id="cfPreloader" role="status" aria-live="polite" aria-label="Loading page"> <div class="cfLoaderInner"> <span class="cfLoaderSpinner" aria-hidden="true"> </span> <span class="cfLoaderText"> LOADING... </span> </div> </div> <script> document.documentElement .classList.add("cf-preloading"); </script>

3. JavaScript sebelum </body>

<script> //<![CDATA[ (function(){ "use strict"; var loader= document.getElementById( "cfPreloader" ); if(!loader)return; var hidden=false; function hidePreloader(){ if(hidden)return; hidden=true; loader.classList.add( "cf-hide" ); document.documentElement .classList.remove( "cf-preloading" ); setTimeout(function(){ if(loader&&loader.parentNode){ loader.parentNode.removeChild( loader ); } },450); } /* * Normal condition: * hide after page resources finish loading. */ window.addEventListener( "load", function(){ setTimeout( hidePreloader, 150 ); }, {once:true} ); /* * Safety fallback: * never keep the visitor trapped. */ setTimeout( hidePreloader, 4500 ); })(); //]]> </script>

Timeout Pengaman

Nilai 4500 berarti loader dipaksa hilang setelah sekitar 4,5 detik apabila event load belum berjalan. Jangan menggunakan timeout sangat panjang karena pengunjung bisa terjebak melihat loading screen padahal sebagian halaman sebenarnya sudah dapat digunakan.

Cara Memasang di Blogger

BACKUP TEMPLATE

Download backup template terlebih dahulu sebelum melakukan perubahan pada HTML Blogger. Dengan begitu template dapat dikembalikan dengan cepat jika terjadi kesalahan markup.

01

Buka Blogger

Login lalu pilih blog yang ingin diedit.

02

Buka Tema

Pilih menu Tema.

03

Edit HTML

Buka menu pada tema aktif kemudian pilih Edit HTML.

04

Pasang CSS

Letakkan CSS loading screen sebelum tag </head>.

05

Pasang HTML

Letakkan elemen #cfPreloader sesudah tag pembuka <body>.

06

Pasang JavaScript

Letakkan engine sebelum tag </body>.

07

Simpan Tema

Simpan lalu buka blog pada tab baru.

08

Uji Mobile

Pastikan loader tidak macet pada perangkat mobile maupun desktop.

Gunakan pencarian editor template untuk menemukan:

</head>

<body

</body>

Pada template Blogger, tag pembuka body dapat mempunyai atribut tambahan sehingga tidak selalu tertulis hanya sebagai <body>.

Pengaturan Loading Screen

Background Warna overlay. #111820

Accent Warna spinner. #0083da

Spinner Size Diameter loader. 48px

Fade Durasi loader menghilang. .35s

Minimum Delay Jeda setelah load. 150ms

Max Timeout Batas tampil maksimal. 4500ms

Mengganti Warna Background

Cari:

background:#111820;

Contoh menggunakan biru CodeFlare:

background:#0083da;

Mengganti Spinner dengan GIF

Ganti:

<span class="cfLoaderSpinner"></span>

menjadi:

<img alt="" src="URL-GIF-ANDA" style="display:block;max-width:64px;height:auto;" />

Mengubah Timeout

setTimeout( hidePreloader, 4500 );

Untuk blog yang relatif ringan, timeout 3–5 detik sudah lebih dari cukup sebagai fallback. Timeout bukan waktu wajib loader ditampilkan; jika halaman selesai lebih cepat, preloader tetap ditutup lebih awal.

Kesalahan yang Harus Dihindari

Memaksa Loader Tampil Terlalu Lama

Jangan menambahkan delay beberapa detik hanya agar animasinya sempat terlihat.

GIF Terlalu Besar

Ironis jika file loading screen justru menjadi salah satu resource paling berat pada halaman.

Tidak Mempunyai Timeout

Resource eksternal yang bermasalah dapat menyebabkan loader menutupi halaman terlalu lama.

Membutuhkan jQuery Hanya untuk Fade

Untuk fungsi sederhana ini native JavaScript dan CSS sudah cukup.

Menganggap Loading Screen Mempercepat Blog

Preloader hanya mengubah presentasi selama proses loading.

Animasi Terlalu Agresif

Efek flash, scale atau rotasi berlebihan dapat mengganggu sebagian pengguna.

Ukur Performa Sebenarnya

Jika tujuan utama Anda adalah meningkatkan kecepatan blog, evaluasi gambar, JavaScript pihak ketiga, font, widget dan Core Web Vitals. Jangan menggunakan loading screen untuk menyembunyikan masalah performa yang sebenarnya.

Troubleshooting

Loading screen tidak muncul

Periksa posisi HTML #cfPreloader dan pastikan CSS-nya berhasil dimuat.

Loader tidak pernah hilang

Pastikan JavaScript engine berada setelah elemen preloader. Versi ini juga mempunyai timeout 4,5 detik sebagai fallback.

Halaman tidak bisa discroll

Periksa apakah class cf-preloading sudah dihapus. Engine final menghapus class tersebut ketika loader ditutup.

Loading screen berkedip cepat

Pada halaman yang sangat cepat, preloader mungkin hanya tampil sebentar. Ini normal dan lebih baik daripada memaksa pengguna menunggu.

Animasi tidak bergerak

Perangkat mungkin mengaktifkan Reduced Motion. Pada kondisi tersebut tutorial ini sengaja menonaktifkan animasi non-esensial.

Loader muncul setelah tombol Back

Browser dapat menggunakan back-forward cache. Jangan bergantung pada beforeunload untuk menampilkan loader setiap kali pengguna meninggalkan halaman.

GIF lambat muncul

Gunakan GIF lebih kecil atau pindah ke spinner CSS yang tidak membutuhkan request gambar tambahan.

USER EXPERIENCE

Loading screen sebaiknya digunakan karena memang sesuai dengan desain, bukan untuk memaksa pengunjung melihat animasi. Jika halaman sudah cepat, tidak menggunakan full-screen preloader juga merupakan pilihan yang sangat baik.

Loading screen masih dapat menjadi elemen visual yang menarik pada Blogger apabila dibuat ringan dan tidak mengganggu.

Perubahan terpenting dari script versi lama adalah kita tidak lagi membutuhkan jQuery hanya untuk menjalankan fade in dan fade out. Native JavaScript sudah menyediakan event load, sementara CSS menangani transisi visualnya.

Penambahan timeout pengaman juga membuat implementasi lebih tahan terhadap resource eksternal yang gagal atau sangat lambat.

Untuk blog dengan tampilan futuristik, spinner, dual ring dan progress line dapat memberikan karakter visual yang menarik. Untuk blog sederhana, spinner CSS satu warna sudah lebih dari cukup.

Gunakan loading screen secukupnya, lalu tetap prioritaskan optimasi performa sebenarnya. Preloader yang bagus adalah preloader yang tampil sebentar, bekerja tanpa error dan segera memberikan jalan kepada konten utama.

Referensi Teknis Dokumentasi browser untuk event dan accessibility.

Window load Event Reduced Motion