Scroll Progress Indicator
Dynamic scroll progress bar at the top of the page
Code
/* Add JS: 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("scrollIndicator").style.width = scrolled + "%"; } */
.scroll-indicator {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 4px;
background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
z-index: 9999;
transition: width 0.1s ease;
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>id</span>="scrollIndicator"</span> "attr-name"</span>>class</span>="scroll-indicator"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>style</span>="height: 2000px; padding: 20px;"</span>>
<"attr-name"</span>>class</span>="tag"</span>>h3</span>>Scroll Down to See Progress</"attr-name"</span>>class</span>="tag"</span>>h3</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>