w3collective/reading-progress-indicator.html

## reading-progress-indicator.html
<!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>
	<!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>