Minimalist Scroll Progress Indicator In Pure JavaScript – pageScrollIndicator.js

Preview:

Description:

A minimalist page scroll indicator to visualize the scroll position (how much the user has scrolled) in a slim progress bar. Fully customizable via CSS.

How to use it:

Create the HTML for the page scroll progress indicator.

<div class="page-scroll-indicator">
  <div class="progress"></div>
</div>

The main function to detect the scroll position & current percentage of scrolling relative to the entire page.

function scrollProgress() {
  var currentState = document.body.scrollTop || document.documentElement.scrollTop;
  var pageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrollStatePercentage = (currentState / pageHeight) * 100;
  document.querySelector(".page-scroll-indicator > .progress").style.width = scrollStatePercentage + "%";
}

Execute the scrollProgress function on window scroll.

window.onscroll = function () { scrollProgress() };

Style the page scroll progress indicator in the CSS.

.page-scroll-indicator {
  width: 100%;
  height: 5px;
  background: white;
}
.progress {
  width: 0%;
  height: 5px;
  background: #007bff;
}