Css reading progress bar on top based on user scrolling
Css reading progress bar on top based on user scrolling
10 minutes 19sHow to Implement a reading reading progress bar that changes when scrolling.
Accessing the scroll properties
We could use a div, but a progress element captures very well this use case. We only
need to style it and set its value attribute.
We can use scrollTop and scrollHeight to change the value attribute of the progress element.
<!DOCTYPE html>
<body>
<progress value="0" max="100"></progress>
<div class="content" style="width: 20%;padding: 20px; margin: auto;">
<!-- Content to have soemthing to scroll -->
lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas quis tellus fermentum, suscipit nunc at,
ullamcorper orci. morbi tincidunt urna eget odio auctor, a accumsan nisi varius. quisque eleifend nunc vel ipsum
sodales gravida. vivamus interdum ultricies nibh. suspendisse sagittis facilisis lorem at feugiat. proin vulputate
pulvinar metus, sed faucibus urna accumsan ut. suspendisse euismod velit leo, et porttitor elit volutpat nec. etiam
id ultrices felis, a dictum dolor. suspendisse tristique aliquet lectus nec ultrices. morbi justo justo, luctus id
varius tempus, fringilla sed nibh. ut faucibus luctus iaculis.
lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas quis tellus fermentum, suscipit nunc at,
ullamcorper orci. morbi tincidunt urna eget odio auctor, a accumsan nisi varius. quisque eleifend nunc vel ipsum
sodales gravida. vivamus interdum ultricies nibh. suspendisse sagittis facilisis lorem at feugiat. proin vulputate
pulvinar metus, sed faucibus urna accumsan ut. suspendisse euismod velit leo, et porttitor elit volutpat nec. etiam
id ultrices felis, a dictum dolor. suspendisse tristique aliquet lectus nec ultrices. morbi justo justo, luctus id
varius tempus, fringilla sed nibh. ut faucibus luctus iaculis.
lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas quis tellus fermentum, suscipit nunc at,
ullamcorper orci. morbi tincidunt urna eget odio auctor, a accumsan nisi varius. quisque eleifend nunc vel ipsum
sodales gravida. vivamus interdum ultricies nibh. suspendisse sagittis facilisis lorem at feugiat. proin vulputate
pulvinar metus, sed faucibus urna accumsan ut. suspendisse euismod velit leo, et porttitor elit volutpat nec. etiam
id ultrices felis, a dictum dolor. suspendisse tristique aliquet lectus nec ultrices. morbi justo justo, luctus id
varius tempus, fringilla sed nibh. ut faucibus luctus iaculis.
lorem ipsum dolor sit amet, consectetur adipiscing elit. maecenas quis tellus fermentum, suscipit nunc at,
ullamcorper orci. morbi tincidunt urna eget odio auctor, a accumsan nisi varius. quisque eleifend nunc vel ipsum
sodales gravida. vivamus interdum ultricies nibh. suspendisse sagittis facilisis lorem at feugiat. proin vulputate
pulvinar metus, sed faucibus urna accumsan ut. suspendisse euismod velit leo, et porttitor elit volutpat nec. etiam
id ultrices felis, a dictum dolor. suspendisse tristique aliquet lectus nec ultrices. morbi justo justo, luctus id
varius tempus, fringilla sed nibh. ut faucibus luctus iaculis.
</div>
</body>
<style type="text/css">
progress {
position: sticky;
top: 0;
}
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
width: 100%;
height: 10px;
background-color: transparent;
color: #cc0000;
}
progress[value]::-moz-progress-bar {
background-color: #cc0000;
}
progress[value]::-webkit-progress-bar {
background-color: transparent;
}
progress[value]::-webkit-progress-value {
background-color: #cc0000;
}
</style>
<script type="text/javascript">
const progress = document.querySelector("progress");
function getPercentScroll() {
return ((document.documentElement.scrollTop + document.body.scrollTop) /
(document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
}
function setProgress() {
progress.setAttribute("value", getPercentScroll());
}
window.onscroll = setProgress;
</script>
</html>