Snippet for creating a progress bar in the header section.
<div class="header mt-100">
<div class="row">
<div class="progress">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
// When the user scrolls the page, execute scrollFn
window.onscroll = function () { scrollFn() };
function scrollFn() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
What are your thoughts on this post?
I’d love to hear from you! Click this link to email me—I reply to every message!
Also use the share button below if you liked this post. It makes me smile, when I see it.