Cara Membuat Progress Scroll Bar

Scroll bar biasanya ada pada diujung samping kanan, tapi kali ini saya akan membuat artikel tentang scroll bar atas, seperti loading progress, tapi ini progress scroll bar
progress scroll bar top ini menggunakan JavaScript

langsung saja.
Copy CSS dibawah ini ke blog kalian
Letakkan di sebelum/diatas kode </style> 

#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;}

dan tambahkan JavaScript dibawah ini ke blog kalian.
letakkan sebelum kode </body>

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

dan terakhir masukkan kode HTMLnya

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

dan Done. contohnya bisa kalian lihat, klik Button Demo

• DEMO

Jika kalian bingung, komen dibawah ae bro.