How to Make a Progress Scroll Bar

Nilesh    9/09/2020    HTML   

The scroll bar is usually at the end of the right side, but this time I will make an article about the top scroll bar, such as loading progress, but this is the top scroll bar
progress scroll bar using

direct JavaScript .
Copy the CSS below to your
blog.Put it before / above the </style>  code

#vam-scrollbar {position:fixed;top:0;left:0;overflow:hidden;width:0%;height:7px;z-index:9999;}
#scrollbar {position:absolute;top:0;left:0;width:100%;height:100%;background-color:#009ccf;}

and add the JavaScript below to your blog.
put it before the </body> code

<script type='text/javascript'>
//<![CDATA[
//www.vamous.id
var bar_bg = document.getElementById("scrollbar"),
    body = document.body,
    html = document.documentElement;

bar_bg.style.minWidth = document.width + "px";

document.getElementsByTagName("body")[0].onresize = function() {
    // Update the gradient width
    bar_bg.style.minWidth = document.width + "px";
}
//www.vamous.id
window.onscroll = function() {
    // Change the width of the progress bar
    var bar = document.getElementById("vam-scrollbar"),
        dw  = document.documentElement.clientWidth,
        dh  = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight ),
        wh  = window.innerHeight,
        pos = pageYOffset || (document.documentElement.clientHeight ?
                              document.documentElement.scrollTop : document.body.scrollTop),
        bw  = ((pos / (dh - wh)) * 100);

    bar.style.width = bw + "%";
}
//]]>
</script>

and finally enter the HTML code

<div id="vam-scrollbar">
    <div id="scrollbar"></div>
</div>

and Done. for example you can see, click the Button Demo

• DEMO

If you are confused, comment below bro.