Skip to content

Instantly share code, notes, and snippets.

@Legends

Legends/scrollBarProgressIndicator.html

Last active April 16, 2020 17:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Legends/0a060fe66ec71d7ca649233a48082d1e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Legends/0a060fe66ec71d7ca649233a48082d1e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
scrollBarProgressIndicator.html
<html>
<head>
<style>
.ind {
height: 10px;
width: 0%;
background-color: red;
position: fixed;
}
</style>
</head>
<body>
<div class="ind"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script>
document.addEventListener('DOMContentLoaded', function () {
let ind = document.querySelector(".ind");
let docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
window.onscroll = scrollBarProgressIndicator;
function scrollBarProgressIndicator() {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let scrolled = (winScroll / docHeight) * 100;
let c = scrolled + "%"
ind.style.width = c;
ind.innerHTML = Math.ceil(scrolled) + "%";
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment