Scroll Progress Circle with Colour Gradient + % Counter

You are here: Home / Freebies For Websites / Demos & Snippets

Scroll Progress Circle with Colour Gradient + % Counter

This progress indicator circle with colour gradient and % counter demo (bottom-right corner) tells you how far you've scrolled down the page. There's a single colour 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.

More demos and snippets

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