A super lightweight and robust library for displaying how far a user has scrolled on a webpage - only 4kb!
Include the script in your HTML and create the ScrollProgressBar:
new ScrollProgressBar();To activate the ScrollProgressBar, simply use the .start() function:
new ScrollProgressBar().start()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. |
new ScrollProgressBar({color: 'lightblue', size: '4rem', opacity: 0.5}).start()new ScrollProgressBar({color: '#ccc', size: '6px', placement: 'left', zIndex: 10}).start()