Scroll progress indicator demo

Start scrolling to see the indicator update. Click it at any point to return to the top.

The ring begins empty when this scroll area is at the top.

As you scroll down, the ring fills and the percentage changes automatically.

This component tracks this element instead of the browser window.

That makes it useful for scrollable panels, sidebars, and long article sections.

Keep scrolling to watch the progress increase.

The percentage gives readers a quick sense of how far they have travelled.

The circular ring provides the same information at a glance.

This extra copy simply creates enough content to test the scroll effect.

The indicator remains visible alongside the content.

The value keeps updating as the scroll position changes.

Try pausing at different points to see the percentage change.

The ring is complete once you reach the end of the panel.

Click the indicator to smoothly return to the beginning.

You reached the end of the scroll progress indicator demo.