Scroll progress bar

Angelos Chalaris · 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.
Preview
<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;
  scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
});

Recommended snippets

  • Image rotate on hover

    CSS, Animation

    Creates a rotate effect for the image on hover.

  • Donut spinner

    CSS, Animation

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

  • Staggered animation

    CSS, Animation

    Creates a staggered animation for the elements of a list.