[CSS] scroll progress bar (html/css/js)

<style>

    html {

        width: 100%;

        height: 100%;

    }

 

    body {

        margin: 0;

        padding: 0;

    }

 

    .header {

        position: fixed;

        top: 0;

        z-index: 1;

        width: 100%;

        background-color: #F1F1F1;

    }

 

    .progress-container {

        width: 100%;

        height: 8px;

        background: #CCCCCC;

    }

 

    .progress-container .progress-bar {

        width: 0;

        height: 8px;

        background: #4CAF50;

    }

 

    .content_obj {

        width: 100%;

        height: 5000px;

        background-color: #eeeeee;

    }

</style>

 

<div class="header">

    <div class="progress-container">

        <div class="progress-bar"></div>

    </div>

</div>

 

<div class="content_obj"></div>

 

<script>

    window.onscroll = function () {

        progressBar()

    };

 

    function progressBar() {

        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;

        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

        var scrolled = (winScroll / height) * 100;

        document.getElementsByClassName("progress-bar")[0].style.width = scrolled + "%";

    }

</script>