Cara Membuat Scroll Loading Bar Keren di Blogger

Cara Membuat Scroll Bar Css di Blogger - Apa sobat melihat loading bar pada bagian ata website galihdesign saat scroll atau gulir halaman kebawah? Tampilan tersebut biasa disebut Scroll Bar.

Scroll Bar akan terlihat efeknya saat kita menggulir (scroll) halaman web kearah bawah atau keatas. Maka akan muncul efek mirip  persentase loading (memuat).

Cara Membuat Scroll Loading Bar Keren di Blogger


Cara Membuat Scroll Loading Bar Keren di Blogger

Masuk ke Blogger > Tema > Edit HTML.

Cari tag </body> lalu tambahkan kode berikut ini tepat diatasnya.
<script type='text/javascript'>//<![CDATA[let scrollBar=document.querySelector("#scrollLine");function fillProgressBar(){let viewportHeight=window.innerHeight;let fullHeight=document.body.clientHeight;let scrollHeight=window.scrollY;let percentScrolled=(scrollHeight/(fullHeight-viewportHeight))*100;scrollBar.style.width=`${percentScrolled}%`}
window.addEventListener("scroll",debounce(fillProgressBar));function checkPosition(){let headers=document.querySelectorAll('h1');headers.forEach(header=>{let scrolling=window.scrollY+window.innerHeight;let headerHeight=header.offsetTop+30;if(scrolling>headerHeight){header.classList.add("in")}
else{header.classList.remove("in")}});let paragraphs=document.querySelectorAll('p');let count=0;paragraphs.forEach(paragraph=>{let scrolling=window.scrollY+window.innerHeight;let paragraphHeight=paragraph.offsetTop+30;if(scrolling>paragraphHeight){paragraph.classList.add("in")}
else{paragraph.classList.remove("in")}})}
document.addEventListener("DOMContentLoaded",debounce(checkPosition));window.addEventListener("scroll",debounce(checkPosition));function debounce(func,wait=15,immediate){var timeout;return function(){var context=this,args=arguments;var later=function(){timeout=null;if(!immediate)func.apply(context,args)};var callNow=immediate&&!timeout;clearTimeout(timeout);timeout=setTimeout(later,wait);if(callNow)func.apply(context,args)}}
//]]></script>


Cari tag </head> lalu tambahkan kode Css berikut ini tepat diatasnya.
<style type='text/css'>
#scrollLine{
 background-color:#f44336;
 background-color:#f44336;
 background-image: linear-gradient(to top left, #ef5350 0%, #d32f2f 100%);
 height:2px;
 position:fixed;
 top:0;
 left:0;
 //width:100%;
 transition:0.05s ease-in all;
 margin-bottom: 1em;
 z-index:1000;

}
</style>


Langkah terakhir adalah memasang kode HTML untuk memanggil Proggress Bar. Cari tag <body> dan letakkan kode berikut tepat dibawahnya.
<div id="scrollLine"></div>
Tampilkan Komentar

Mohon untuk menggunakan bahasa yang baik dan benar.
EmoticonEmoticon