Cara Menambahkan Indikator Loading di Blogger

Indikator loading berguna untuk memberi tahu pengunjung bahwa halaman sedang memuat data. Berikut cara menambahkannya di postingan Blogger dengan HTML, CSS, dan JavaScript.

1. Tambahkan Kode HTML

Salin dan tempel kode berikut di editor Blogger (mode HTML):

<div id="loading">
    <div class="loading-container">Mohon tunggu, sedang memuat data...</div>
    <div class="loading-bar-container">
        <div class="loading-bar"></div>
    </div>
</div>

2. Tambahkan CSS untuk Tampilan Loading

Tambahkan kode CSS berikut agar indikator loading terlihat menarik:

<style>
.loading-container {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0;
}

.loading-bar-container {
    width: 100%;
    background: #ddd;
    height: 5px;
    position: relative;
    overflow: hidden;
}

.loading-bar {
    width: 0;
    height: 5px;
    background: #007BFF;
    position: absolute;
    animation: loading 2s infinite;
}

@keyframes loading {
    0% { width: 0; }
    50% { width: 50%; }
    100% { width: 100%; }
}
</style>

3. Tambahkan JavaScript untuk Efek Loading

Tambahkan kode JavaScript ini agar loading berjalan otomatis:

<script>
function showLoading() {
    document.getElementById("loading").style.display = "block";
}

function hideLoading() {
    document.getElementById("loading").style.display = "none";
}

function fetchData() {
    showLoading();
    setTimeout(() => {
        hideLoading();
        document.body.innerHTML += "<p>Data berhasil dimuat!</p>";
    }, 3000); 
}

window.onload = fetchData;
</script>