Visualize Reading Progress Using Bootstrap Progressbar

A simple script for creating a fixed progress bar with the current percent text that auto updates on scroll to representing the current scroll position.

Can be used as a reading progress indicator that visualizes the current reading progress based on a user's scroll position.

How to use it:

1. The reading progress indicator requires Bootstrap's progressbar component.

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap javascript -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. Create a progress bar at the begnining of your page, post, or article.

<div class="progress position-sticky">
  <div class="progress-bar" id="myProgressBar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

3. Make the reading progress bar sticky on the top.

#myProgressBar {
  width: 0;
}

.progress {
  top: 0;
}

4. The JavaScript to enable the reading progress indicator and update the progress bar based on the scroll position.

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("myProgressBar").style.width = scrolled + "%";
  document.getElementById("myProgressBar").innerHTML= Math.round(scrolled) + "%";
}

Changelog:

2020-05-19

• Updated CSS

---

This awesome jQuery plugin is developed by MaxMorozov23. For more Advanced Usages, please check the demo page or visit the official website.