Mungkin sobat suka ataupun pernah melihat garis tipis yang tepat berada paling atas pada sebuah website, yang garis tipis itu yang akan memanjang jika di scroll ke bawah dan memendek jika scroll ke atas. Jika sobat belum pernah lihat sobat bisa buka saja YouTube, karena YouTube juga hampir sama, hanya saja kalau YouTube garis tipisnya itu akan keluar pada saat loading saja. Beda halnya dengan yang di bahas disini, tapi untuk tampilannya itu sendiri sama saja.
Mungkin ada beberapa orang menganggap buat apa, dan apa fungsinya?? memang untuk masalah fungsi mungkin hanya sebagai indikator scroll saja. Tapi ada beberapa orang juga yang menganggap hal ini bisa membuat tampilan website menjadi lebih bagus lagi dan tidak monoton karena terdapat animasi - animasi yang membuat tampilan web tidak terlalu monoton.
pertama, sobat buka terlebih dahulu editor HTML template sobat.
kedua, sobat copy tag HTML di bawah ini dan paste tepat di bawah tag
<div class="progress-bar" id="myBar"></div>
<style type="text/css">
#myBar {position: fixed; background: #f57c00; top: 0; left: 0; height: 2px; width: 0; z-index: 1000; transition: all .5s;}
</style>
<script type="text/javascript">
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>