Scroll progress bar

CSS, Animation, Visual · Oct 13, 2021

Creates a progress bar indicating the scroll percentage of the page.

  • Use position: fixed and a large z-index value to place the element at the top of the page and above any content.
  • Use EventTarget.addEventListener() and Element.scrollTop to determine the scroll percentage of the document and apply it to the width of the element.
<div id="scroll-progress"></div>
body {
  min-height: 200vh;

#scroll-progress {
  position: fixed;
  top: 0;
  width: 0%;
  height: 4px;
  background: #7983ff;
  z-index: 10000;
const scrollProgress = document.getElementById('scroll-progress');
const height =
  document.documentElement.scrollHeight - document.documentElement.clientHeight;

window.addEventListener('scroll', () => {
  const scrollTop =
    document.body.scrollTop || document.documentElement.scrollTop; = `${(scrollTop / height) * 100}%`;

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Squiggle link hover effect

    Creates a squiggle effect when hovering over a link.

    CSS, Animation · Jan 10, 2023

  • Image rotate on hover

    Creates a rotate effect for the image on hover.

    CSS, Animation · Oct 11, 2021

  • Donut spinner

    Creates a donut spinner that can be used to indicate the loading of content.

    CSS, Animation · Oct 13, 2021