Scroll (Reading) Progress Indicator In Vanilla JavaScript – scrollprogressJS

Category: Javascript , Recommended | May 5, 2018
Author: giventofly
Views Total: 597
Official Page: Go to website
Last Update: May 5, 2018
License: MIT

Preview:

Scroll (Reading) Progress Indicator In Vanilla JavaScript – scrollprogressJS

Description:

Yet another JavaScript library to create a sticky top(or bottom) progress bar which can be used to visualize the current scroll position (reading progress) on the webpage.

In addition, it also has the ability to display the current scroll progress in percentage.

How to use it:

Import the scrollprogressJS’ files into your html document.

<link href="scrollprogressJS.css" rel="stylesheet">
<script src="scrollprogressJS.js"></script>

Initialize the scroll progress indicator and done.

document.addEventListener("DOMContentLoaded", function (event) {
  progressJS.start();
});

If you want to display the current scroll (reading) progress in percentage.

<p class="per"></p>
document.addEventListener("DOMContentLoaded", function (event) {
  progressJS.start({
    "attach":  ".per"
  });
});

Customize the appearance of the progress indicator.

progressJS.start({
  //color
  "color": "#003f72",
  //height
  "height": "3px",
  "top": 0,
  "bottom": 0,
  "left": 0,
  "right": 0,
  "zIndex": 9999,
  //bottom or top
  "ontop": true,
  //left to right
  "ltr": true,
  //js style or css
  "css": false,
});

Decide whether to use decimal numbers.

progressJS.start({
  "round": false
});

Hide the indicator (only display percentage values.).

progressJS.start({
  "nobar": false
});

You Might Be Interested In:

Leave a Reply