ScrollProgress

Thin top/bottom bar tracking scroll position as percentage of page height.

stable feedback #scroll#progress#indicator

Live playground

Scroll this container to see the bar fill.

Lorem ipsum dolor sit amet — line 1.

Lorem ipsum dolor sit amet — line 2.

Lorem ipsum dolor sit amet — line 3.

Lorem ipsum dolor sit amet — line 4.

Lorem ipsum dolor sit amet — line 5.

Lorem ipsum dolor sit amet — line 6.

Lorem ipsum dolor sit amet — line 7.

Lorem ipsum dolor sit amet — line 8.

Lorem ipsum dolor sit amet — line 9.

Lorem ipsum dolor sit amet — line 10.

Lorem ipsum dolor sit amet — line 11.

Lorem ipsum dolor sit amet — line 12.

Lorem ipsum dolor sit amet — line 13.

Lorem ipsum dolor sit amet — line 14.

Lorem ipsum dolor sit amet — line 15.

Lorem ipsum dolor sit amet — line 16.

Lorem ipsum dolor sit amet — line 17.

Lorem ipsum dolor sit amet — line 18.

Lorem ipsum dolor sit amet — line 19.

Lorem ipsum dolor sit amet — line 20.
Loading preview…