A Page Progress Bar with JavaScript and CSS Variables

Here’s how to accomplish the scroll progress bar that you can see as you scroll though pages of this site. It’s a nice way to convey a progress indicator for readers to know how far along they are in a post.

It uses the power of CSS Variables, and the solution is adapted from part of this excellent talk by Lea Verou.

↓ Here's a great JavaScript course we recommend. Plus, this affiliate banner helps support the site 🙏

First, add the following markup right after the opening body tag:

<div class="progress"></div>

Then style this .progress element with something like this:

.progress {
  background: linear-gradient(to right, #F9EC31 var(--scroll), transparent 0);
  background-repeat: no-repeat;
  position: fixed;
  width: 100%;
  height: 4px;
  z-index: 1;
}

Notice how in the linear gradient we’re referring to a CSS variable named --scroll, which will be given a value on scroll.

That means that all that’s left to do is listen for the document’s scroll event and set the value of the --scroll custom property with the scroll percentage. We use element.style.setProperty for that. The .progress element will get an inline value for --scroll once it gets set.

Thanks to Phil Ricketts and his solution to this StackOverflow question for an accurate way to calculate the document scroll percentage:

var h = document.documentElement,
  b = document.body,
  st = 'scrollTop',
  sh = 'scrollHeight',
  progress = document.querySelector('.progress'),
  scroll;

document.addEventListener('scroll', function() {
  scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  progress.style.setProperty('--scroll', scroll + '%');
});

👉 Note that IE or Edge don't support CSS custom properties at the moment. Support is coming however, and it the mean time the feature gracefully degrades.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#