ScrollProgressBar.js
- A super lightweight and robust library for displaying how far a user has scrolled on a webpage.
Supports all major browsers:
Chrome
Safari
Firefox
Internet Explorer
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:
pxOutput code:
new
ScrollProgressBar({color:
'#ffa453',
opacity:
1,
placement:
'top',
size:
'10px'}).start();