ScrollProgressBar.js

A super lightweight and robust library for displaying how far a user has scrolled on a webpage - only 4kb!

Core

Include the script in your HTML and create the ScrollProgressBar:

new ScrollProgressBar();

To activate the ScrollProgressBar, simply use the .start() function:

new ScrollProgressBar().start()

Options

The ScrollProgressBar can take in an object with options as a parameter. You can freely choose what options you want to use.

Name	Type	Default value	Description
color	String	"#ffa453"	Sets the color of the bar.
opacity	String or Integer	1	Sets the opacity of the bar.
placement	String	"top"	Sets the placement of the bar on the screen. Can either be "top", "left", "right" or "bottom"
size	String	'10px'	Sets the size of the bar. Accepts any valid CSS-size property.
zIndex	Integener	9999	Sets the z-index of the bar.

Examples

1:

new ScrollProgressBar({color: 'lightblue', size: '4rem', opacity: 0.5}).start()

2:

new ScrollProgressBar({color: '#ccc', size: '6px', placement: 'left', zIndex: 10}).start()