Scroll Progress with Indicator Bar + % Counter

This script tells you how far you've scrolled down the page by way of a progress indicator bar and % counter, which recalculates if the browser window resizes, or if device orientation changes from portrait to landscape (and vice versa).

Useful on long articles to show visitors how far they've read, and how much further they have to go.

Works in modern browsers and IE8+.

Please view the source of this page for HTML markup, CSS and JS.

0%

JavaScript Performance Considerations

Because this is a scroll-activated script, the rate at which the function fires has the potential to be very high.

Attaching functions directly to the scroll event is usually a bad idea; Scrolling using a trackpad, scroll wheel, or just by dragging a scrollbar can easily trigger 30 events per second. Scrolling on a smartphone can trigger significantly more.

This script takes performance into consideration by using;

"Debouncing" and "throttling" help improve performance by controlling the effect of potentially expensive JavaScript functions that may otherwise cause a page to become unresponsive when fired repeatedly. Please see the Debouncing and Throttling Explained Through Examples article at CSS Tricks for further information.

Scroll down and watch your progress...

Now for some filler to give you something to scroll:

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah,

blah.

Related

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.