Progress bar dapat diartikan sebagai penunjukkan kepada pengguna seberapa jauh dia dalam suatu proses. Dalam hal ini yaitu prosess scroll dimana akann ada garis yang semakin memanjang tepat dibawah url bar atau tempat biasanya ada loading ketika memuat halaman website.
Progressbar disini memerlukan interaksi berupa scroll dari user yang menunjukkan seberapa jauh dia telah mengscroll halaman tersebut sampai ke paling bawah.
Penampakannya sendiri dapat kalian lihat saat mengscroll halaman ini. Di paling atas ada garis yang semakin lama semakin memanjang seiring kalian mengscroll halaman ini. Nah itu yang dimaksud Scroll Progress Bar.
Dan kali ini kita akan membuatnya agar dapat diterapkan di website maupun blog kamu. Lanjud scroll kebawah.
Membuat Scroll Bar Responsive
Langkah 1 : Kalian copy script CSS berikut dan letakkan diantara tag <style> dan </style>.
/* Progres Bar */
.progress-bar{background:#ff1a94;opacity:.95;position:fixed;top:0;left:0;height:5px;z-index:999;transition:all .4s cubic-bezier(.47,1.64,.41,.8);border-radius:0px 10px 10px 0px;}
Untuk kamu pengguna CMS blogger, bisa meletakkannya tepat diatas kode ]]></b:skin>
Langkah 2 : Copy paste script dibawah dan letakan diantara tag <body> dan </body>. Bisa dibawah <body> maupun diatas </body>. Terserah kamu mau diletakkan dimananya.
<div class="progress-bar" id="porgressbar"></div>
<script>
//<![CDATA[
window.addEventListener("scroll",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("porgressbar").style.width=scrolled+"%"}
//]]>
</script>Untuk pengguna blogger sama saja. Intinya paste diantara tag <body> dan </body>.
Langkah 3 : Jangan lupa save dan kamu bisa lihat hasilnya.
Scroll Bar dengan Warna Gradient
Nah, bila tutorial diatas hanya menggunakan 1 warna saja, disini kita akan membuat warna gradasi atau menggabungkan 2 warna pada 1 progressbar.
Kurang lebih tampilannya seperti pada halaman ini yaitu gradasi atau campuran 2 warna, putih dan pink.
Cara membuatnya gampang. Kalian hanya perlu mengubah bagian yang saya tandai dibawah
/* Progres Bar */
.progress-bar{background:#ff1a94;opacity:.95;position:fixed;top:0;left:0;height:5px;z-index:999;transition:all .4s cubic-bezier(.47,1.64,.41,.8);border-radius:0px 10px 10px 0px;}Menjadi:
/* Progres Bar */
.progress-bar{background:linear-gradient(90deg,#ffffff 10%,#ff1a94 90%);opacity:.95;position:fixed;top:0;left:0;height:5px;z-index:999;transition:all .4s cubic-bezier(.47,1.64,.41,.8);border-radius:0px 10px 10px 0px;}Kamu hanya perlu mengganti kode hex colornya saja. Kemudian simpan. Simple kan.
Sekian, tq.