Creates a progress bar indicating the scroll percentage of the page the code utilizes ScrollTop, ScrollHeight, ClientHeight. Sourced under a permissive license.

Creates a page progress bar which indicates the scroll percentage of the page, the code snippet utilizes ScrollTop, ScrollHeight, ClientHeight

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div id="scroll-progress"></div>
<style>
body {
min-height: 200vh;
}
#scroll-progress {
position: fixed;
top: 0;
width: 0%;
height: 4px;
background: #7983ff;
z-index: 10000;
}
</style>
<script>
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}%`;
});
</script>
<div id="scroll-progress"></div> <style> body { min-height: 200vh; } #scroll-progress { position: fixed; top: 0; width: 0%; height: 4px; background: #7983ff; z-index: 10000; } </style> <script> 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}%`; }); </script>
<div id="scroll-progress"></div>

<style>
body {
  min-height: 200vh;
}

#scroll-progress {
  position: fixed;
  top: 0;
  width: 0%;
  height: 4px;
  background: #7983ff;
  z-index: 10000;
}
</style>

<script>
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}%`;
});
</script>

Tags: CSS, HTML, CSS, CSS code snippet, html code snippet, javascript, percent loading, scroll percentage, javascript scroll percent, scrollTop, clientHeight, scrollHeight, window.addeventlistener

Image: Unsplash license

CC BY 4.0 added intro and tags – 30 Seconds of Code