Cara Menciptakan Progress Scroll Bar

Baca Juga

Scroll kafetaria biasanya ada pada diujung samping kanan, tapi kali ini aku akan menciptakan artikel ihwal scroll kafetaria atas, menyerupai loading progress, tapi ini progress scroll bar
progress scroll kafetaria top ini memakai JavaScript

pribadi saja.
Copy CSS dibawah ini ke blog kalian
Letakkan di sebelum/diatas aba-aba </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 aba-aba </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 kafetaria     var kafetaria = 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 aba-aba HTMLnya

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

dan Done. misalnya dapat kalian lihat, klik Button Demo

• DEMO

Jika kalian bingung, komen dibawah ae bro.