Script Progress Bar Untuk Blog - XWAPPER

Cara Mudah Memasang Reading Progress Bar di Blog (Modern & Ringan)

Pernahkah Anda melihat garis berjalan di bagian atas website saat Anda melakukan scroll ke bawah? Itu disebut Reading Progress Bar. Fitur ini sangat berguna untuk membantu pembaca mengetahui seberapa jauh mereka telah membaca artikel Anda.

Selain memberikan kesan modern, fitur ini juga meningkatkan pengalaman pengguna (UX) karena pembaca mendapatkan indikator visual yang jelas.

Cara Pemasangan

Untuk pengunjung yang ingin memasang fitur ini di blog masing-masing, caranya sangat mudah. Cukup salin kode di bawah ini dan letakkan tepat di atas kode `` pada editor HTML blog Anda.

<style>
  /* Wadah garis */
  .difan-progress-container {
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    height: 5px;
    background: rgba(0,0,0,0.1); /* Background samar */
  }
  
  /* Garis progres */
  .difan-progress-bar {
    height: 5px;
    background: #007bff; /* Warna biru */
    width: 0%;
    transition: width 0.1s ease-out;
  }
</style>

<div class="difan-progress-container">
  <div class="difan-progress-bar" id="difanBar"></div>
</div>

<script>
window.onscroll = function() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("difanBar").style.width = scrolled + "%";
};
</script>

Penutup

Script ini sangat ringan karena menggunakan JavaScript murni tanpa perlu memanggil library tambahan seperti jQuery. Dengan begitu, kecepatan blog Anda tetap terjaga. Selamat mencoba dan error 😀