Reading Progress Bar Blogger

क्या आपने देखा है कि कुछ popular websites अपनी site के top पर  पर reading progress bar indicator दिखाती हैं? 

ये यह बार कैसे  दिखाती हैं? यह छोटा बार आपकी website के user  को दिखाता है कि पड़ने   के लिए  content का  कितना हिस्सा बचा है और उन्हें पढ़ना जारी रखने के लिए प्रोत्साहित करता है। इस लेख में, हम आपको बतायेगे  कि ब्लॉगर पोस्ट में रीडिंग प्रोग्रेस बार को कैसे जोड़ा जाए।

Step 1 – Adding the JQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.onscroll = function() {myFunction()};

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

<div class="progress-bar-background">
    <div class="progress-bar" id="progressBar"></div>
</div>

/* Background of progress bar */
.progress-bar-background {
  width: 100%;
  height: 5px;
  background: #ccc;
  position: fixed;
  top: 0;
  z-index: 999;
}

/* The progress bar */
.progress-bar {
  height: 5px;
  background: #ff7e00;
  width: 0%;
}