GitHub link!

ScrollProgressBar.js

- A super lightweight and robust library for displaying how far a user has scrolled on a webpage.

Get minified code

Supports all major browsers:

Chrome

Safari

Firefox

Internet Explorer Internet Explorer Logo

Microsoft Edge

Opera

ScrollProgressBar is easy to implement:

1. Add the script source to your HTML.
2. Start the ScrollProgressBar:


              new
              ScrollProgressBar().start();

There are different configurable options you can implement:

color is #ffa453 by default.	Choose the color of the bar. Accepts rgb, rgba, hex + any other CSS-color value.
opacity is 1 by default.	Choose the opacity of the bar.
placement is top by default.	Choose where you want the bar to be placed on the screen. You can choose between top, left, right and bottom.
size is 10px by default.	Choose the size of the bar. Accepts all valid CSS-size values (px, em, rem etc.)
zIndex is 9999 by default.	Set the z-index of the bar. 9999 should be fine in most cases, but if it isn't then set it to your desired value.

Test out the different options:

Select color:

Select opacity:

Select placement:

Select size:

Output code:


                  new
                  ScrollProgressBar({color:
                  '#ffa453',
                  opacity:
                  1,
                  placement:
                  'top',
                  size:
                  '10px'}).start();