Scroll progress bar

A thin gradient bar across the top that fills as the user scrolls down the page. Lightweight reading-progress cue.

Effects Captured

Use when — long pages (articles, landing pages with deep storytelling). Helps the user gauge how much further to scroll. Don't use on short pages — meaningless and adds visual noise.

Live demo

Scroll the preview window — the gradient bar at the top fills proportionally.

Scroll inside this box to see the progress bar at the top fill up.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet ipsum sit amet enim faucibus tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Suspendisse potenti. Donec sit amet velit nec arcu maximus dictum.

Cras volutpat ipsum at libero porta, eget hendrerit lacus iaculis.

Aenean varius justo a metus tempus, ut auctor lectus rhoncus.

Vivamus ac dolor sed orci convallis tincidunt non sed mauris.

Ut id arcu sit amet enim mattis convallis a in massa.

Quisque eu pretium urna. In hac habitasse platea dictumst.

Sed venenatis dapibus lacus, sit amet hendrerit nibh dictum at.

Maecenas pulvinar, ipsum at sodales vulputate, sapien risus pellentesque sapien.

End of the demo content.

HTML

<div class="scroll-progress" id="scrollProgress" aria-hidden="true"></div>

CSS

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--gold) 50%, var(--turq) 100%);
  z-index: 1000;
  transition: width 80ms linear;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(200,16,46,0.4);
}

JS — 6 lines

const bar = document.getElementById('scrollProgress');
window.addEventListener('scroll', () => {
  const h = document.documentElement;
  const pct = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
  bar.style.width = pct + '%';
}, { passive: true });

Variants

Mono color — drop the gradient for a single brand color if the multicolor reads as too playful for the site.

Bottom-of-screen — change top: 0 to bottom: 0. Some sites do this so the bar doesn't compete with sticky nav.

Section-aware — combine with scroll-spy logic to also highlight which nav section the user is currently in. More involved.

Source: Chevy 55 landing page (user-uploaded HTML, 2026-05-18).