Slim Progressbar To Indicate How Far You Are Scrolling – sprogress.js

sprogress.js is a JavaScript library to generate a scroll position progress bar that indicates the reading progress of an article/post.

How to use it:

Install the package and import the sprogress into your project.

# Yarn
$ yarn add sprogress
# NPM
$ npm install sprogress --save

import SProgress from 'sprogress';

Or directly load the sprogress.js library in the document.

<script src="https://cdn.jsdelivr.net/npm/sprogress@latest/lib/sprogress.min.js"></script>

Initialize the sprogress.js and the library will take care of the rest.

SProgress.init();

Trigger a function when the scrollDistanceTarget is reached by the progress bar.

SProgress.init({
  scrollDistanceTarget: 70 // in px
});
document.addEventListener('scrollDistanceEvent', displayNewsLetterModal, {
  once: true // trigger only once
});

Customize the appearance of the progress bar.

SProgress.init({
  color: '#222',
  height: 20
});

Or apply your own CSS styles to the progress bar.

.scroll-progress {
  /* your styles here */
}