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 Google Chrome Logo Safari Safari Logo Firefox Firefox Logo Internet Explorer Internet Explorer Logo Microsoft Edge Microsoft Edge Logo Opera Opera Logo

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:

1

Select placement:

Select size:

px

Output code:

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