Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reading progress indicator (on scroll) in JavaScript
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Create a reading progress indicator (on scroll) in JavaScript</title>
<style>
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 4px;
z-index: 99;
background-color: #b22222;
transition: width 1s;
}
article {
width: 640px;
margin: auto;
font-family: sans-serif;
line-height: 1.4;
}
</style>
</head>
<body>
<div id="progress-bar"></div>
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
<p>A scelerisque purus semper eget duis at tellus. Fusce id velit ut tortor pretium viverra suspendisse potenti. Aenean euismod elementum nisi quis eleifend quam. Felis donec et odio pellentesque diam volutpat commodo sed egestas. Quis lectus nulla at volutpat diam ut venenatis tellus. Euismod elementum nisi quis eleifend quam. Facilisi etiam dignissim diam quis enim lobortis. Purus sit amet volutpat consequat mauris nunc congue. In nibh mauris cursus mattis molestie a iaculis.</p>
<p>Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Bibendum at varius vel pharetra vel turpis nunc eget. Semper risus in hendrerit gravida rutrum quisque non tellus orci.</p>
<p>Eget dolor morbi non arcu risus. Hendrerit dolor lorem ipsum dolor sit amet. Sapien et ligula ullamcorper malesuada proin. A lacus vestibulum sed arcu. Id faucibus nisl tincidunt eget. Nec feugiat in fermentum posuere urna. Integer enim neque volutpat ac tincidunt vitae. Blandit massa enim nec dui nunc mattis. Aliquet sagittis id consectetur purus ut faucibus. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit.</p>
<h3>Mattis aliquam faucibus purus</h3>
<p>Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p>
<p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p>
<p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p>
<p>A scelerisque purus semper eget duis at tellus. Fusce id velit ut tortor pretium viverra suspendisse potenti. Aenean euismod elementum nisi quis eleifend quam. Felis donec et odio pellentesque diam volutpat commodo sed egestas. Quis lectus nulla at volutpat diam ut venenatis tellus. Euismod elementum nisi quis eleifend quam. Facilisi etiam dignissim diam quis enim lobortis. Purus sit amet volutpat consequat mauris nunc congue. In nibh mauris cursus mattis molestie a iaculis.</p>
<h3>Sit amet nulla facilisi</h3>
<p>Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Bibendum at varius vel pharetra vel turpis nunc eget. Semper risus in hendrerit gravida rutrum quisque non tellus orci.</p>
<p>Eget dolor morbi non arcu risus. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Sapien et ligula ullamcorper malesuada proin. A lacus vestibulum sed arcu. Id faucibus nisl tincidunt eget. Nec feugiat in fermentum posuere urna. Integer enim neque volutpat ac tincidunt vitae. Blandit massa enim nec dui nunc mattis. Aliquet sagittis id consectetur purus ut faucibus. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit.</p>
<p>Mattis aliquam faucibus purus in. Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p>
<p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p>
<p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p>
<h3>Mattis aliquam faucibus purus</h3>
<p>Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p>
<p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p>
<p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p>
<p>A scelerisque purus semper eget duis at tellus. Fusce id velit ut tortor pretium viverra suspendisse potenti. Aenean euismod elementum nisi quis eleifend quam. Felis donec et odio pellentesque diam volutpat commodo sed egestas. Quis lectus nulla at volutpat diam ut venenatis tellus. Euismod elementum nisi quis eleifend quam. Facilisi etiam dignissim diam quis enim lobortis. Purus sit amet volutpat consequat mauris nunc congue. In nibh mauris cursus mattis molestie a iaculis.</p>
<h3>Sit amet nulla facilisi</h3>
<p>Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Bibendum at varius vel pharetra vel turpis nunc eget. Semper risus in hendrerit gravida rutrum quisque non tellus orci.</p>
<p>Eget dolor morbi non arcu risus. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Sapien et ligula ullamcorper malesuada proin. A lacus vestibulum sed arcu. Id faucibus nisl tincidunt eget. Nec feugiat in fermentum posuere urna. Integer enim neque volutpat ac tincidunt vitae. Blandit massa enim nec dui nunc mattis. Aliquet sagittis id consectetur purus ut faucibus. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit.</p>
<p>Mattis aliquam faucibus purus in. Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p>
<p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p>
<p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p>
<h3>Mattis aliquam faucibus purus</h3>
<p>Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p>
<p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p>
<p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p>
<p>A scelerisque purus semper eget duis at tellus. Fusce id velit ut tortor pretium viverra suspendisse potenti. Aenean euismod elementum nisi quis eleifend quam. Felis donec et odio pellentesque diam volutpat commodo sed egestas. Quis lectus nulla at volutpat diam ut venenatis tellus. Euismod elementum nisi quis eleifend quam. Facilisi etiam dignissim diam quis enim lobortis. Purus sit amet volutpat consequat mauris nunc congue. In nibh mauris cursus mattis molestie a iaculis.</p>
<h3>Sit amet nulla facilisi</h3>
<p>Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Bibendum at varius vel pharetra vel turpis nunc eget. Semper risus in hendrerit gravida rutrum quisque non tellus orci.</p>
<p>Eget dolor morbi non arcu risus. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Sapien et ligula ullamcorper malesuada proin. A lacus vestibulum sed arcu. Id faucibus nisl tincidunt eget. Nec feugiat in fermentum posuere urna. Integer enim neque volutpat ac tincidunt vitae. Blandit massa enim nec dui nunc mattis. Aliquet sagittis id consectetur purus ut faucibus. Ultrices tincidunt arcu non sodales neque sodales ut etiam sit.</p>
<p>Mattis aliquam faucibus purus in. Cras pulvinar mattis nunc sed blandit libero volutpat. A pellentesque sit amet porttitor eget dolor morbi. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Orci phasellus egestas tellus rutrum tellus. Semper quis lectus nulla at volutpat diam ut. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque.</p>
<p>Ultricies leo integer malesuada nunc vel risus commodo. Cras semper auctor neque vitae tempus quam pellentesque. Odio aenean sed adipiscing diam. Aliquet risus feugiat in ante. Ultrices eros in cursus turpis massa tincidunt dui. Leo urna molestie at elementum. Lacus vel facilisis volutpat est. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Lectus sit amet est placerat in egestas erat. Sed velit dignissim sodales ut eu. Eget mi proin sed libero enim sed faucibus. Pharetra et ultrices neque ornare aenean euismod elementum nisi.</p>
<p>Elementum sagittis vitae et leo duis ut diam quam. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. Gravida arcu ac tortor dignissim convallis aenean. Mattis enim ut tellus elementum sagittis vitae et. Curabitur gravida arcu ac tortor.</p>
</article>
<script>
const progressBar = document.getElementById("progress-bar");
const setProgressBar = () => {
let scrollDist = document.documentElement.scrollTop || document.body.scrollTop;
let progressWidth = (scrollDist / (document.body.scrollHeight - document.documentElement.clientHeight)) * 100;
progressBar.style.width = progressWidth + "%";
};
if (progressBar) {
window.addEventListener("scroll", setProgressBar);
}
</script>
</body>
</html>
@w3collective
Copy link
Author

w3collective commented Feb 9, 2021

@mmarkus13
Copy link

mmarkus13 commented Jun 8, 2021

How to make it work on android browsers as well?

@w3collective
Copy link
Author

w3collective commented Jun 8, 2021

Which browser & version? Have just tested the above code in the default Android browser and Chrome (90.0.4430.210) on Android without issue.

@mmarkus13
Copy link

mmarkus13 commented Jun 9, 2021

Latest android (10 QKQ1.190825.002 / MIUI 12.0.4) & version of each browser, checked on: Brave (1.2486); Chrome (91.0.4472.88) and Mi Browser (V12.10.8-gn) as well.
Java is enabled within the browsers yet this reading progress indicator is not showing up on phone.

I've found another solution with svg/jquery script that worked - interestingly again not the one with bar, but chart with percentages #just the positions were a bit off there.

Initially I've copied only the functional parts:
<div id="progress-bar"></div> to HTML part;
CSS stuff to <style>...</style>
and JS within <script>...</script> section to the bottom of the page.

Now just for test purpose I've copied the whole your HTML code above to my domain @webnode and checked again on my phone;
it still does not work.
https://devnullproxy.webnode.com/ipsum-rpi/

Tried with another android device as well - most likely the issue has something to do with Webnode...; just can't figure out what is the matter.

@w3collective
Copy link
Author

w3collective commented Jun 9, 2021

Ok, I see it's an issue with how Webnode applies z-indexing to elements within the page.

The progress bar is working it's just covered by the header.

If the progress bar div is inserted dynamically it resolves the issue, try updating the script as follows:

<script>
  div = document.createElement("div");
  div.id = "progress-bar";
  document.body.appendChild(div);
  const progressBar = document.getElementById("progress-bar");
  const setProgressBar = () => {
    let scrollDist = document.documentElement.scrollTop || document.body.scrollTop;
    let progressWidth = (scrollDist / (document.body.scrollHeight - document.documentElement.clientHeight)) * 100;
    progressBar.style.width = progressWidth + "%";
  };
  if (progressBar) {
    window.addEventListener("scroll", setProgressBar);  
  }
</script>

@mmarkus13
Copy link

mmarkus13 commented Jun 9, 2021

Oh, right! Thanks; indeed it is covered by header.

The script you've just pasted above did not fix it for me;
however I've moved the bar from top: 0 to bottom: 0 within the style settings,
this way it is always visible independently of the device being used for viewing it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment