RSL Scroll Progress

Visual scroll indicators that show reading progress. Scroll down to see the bar fill!

Basic Scroll Progress (Top Bar)

The default implementation shows a horizontal bar at the top of the page.

Bottom Position

Place the progress bar at the bottom of the viewport.

Color Customization

Change the progress bar color to match your design.

Thickness Variations

Adjust the height for more or less prominence.

Vertical Progress (Left Side)

Display scroll progress as a vertical bar on the left edge.

Vertical Progress (Right Side)

Display scroll progress on the right edge instead.

Keep scrolling to see the progress bar grow...

Almost there...

You've reached the bottom! The progress bar should be at 100%.