Minimal Horizontal Scroll Progress Bar With Pure JavaScript – skunkScroll

Preview:

Description:

skunkScroll is a JavaScript library to create a responsive horizontal scrollbar which can be used to keep track of the scroll progress when scrolling down the webpage.

How to use it:

Include the main JavaScript on the webpage.

<script src="js/purejavascript.js"></script>

That’s it. Then you can style the scroll progress bar in the CSS as follows:

#scrollbar {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0%;
  height: 5px;
  z-index: 9999;
}

#scrollbar-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E16036;
}