Css reading progress bar on top based on user scrolling

Css reading progress bar on top based on user scrolling

10 minutes 19s

How 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>
    
    
    

Notes

• An example of the effect
https://www.strongerbyscience.com/risks-of-returning/