Scroll Progress Circle + % Counter
This progress indicator circle and % counter demo (bottom-right corner) tells you how far you've scrolled down the page. There's a colour gradient version too. It 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 IE10+ (no linear-gradient support in IE8/9, although the % counter works).
Please view the source of this page for HTML markup, CSS and JS.
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;
- A throttle to limit how often the scrollProgress() function executes while scrolling.
- A debounce to recalculate document height and fire the scrollProgress() function after a window resize event.
"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...
Hint: Look in the bottom-right corner as you scroll down.
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
- Scroll Progress with Indicator Bar + % Counter
- Scroll Progress Circle with Colour Gradient + % Counter
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.