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

Category: Javascript , Recommended | August 1, 2019
Author: theghostyced
Views Total: 390
Official Page: Go to website
Last Update: August 1, 2019
License: MIT

Preview:

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

Description:

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/[email protected]/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 */
}

You Might Be Interested In:


Leave a Reply