You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Reading Progress Bar Animation with HTML CSS JavaScript
JavaScript
// progressBar main divconstprogressBar=document.querySelector("#progress-bar");//Whichever div will work basedconstmainBlogSection=document.querySelector("main");constanimateProgressBar=()=>{letscrollDistance=-mainBlogSection.getBoundingClientRect().top;letprogressWidth=(scrollDistance/(mainBlogSection.getBoundingClientRect().height-document.documentElement.clientHeight))*100;letvalue=Math.floor(progressWidth);progressBar.style.width=value+"%";if(value<0){progressBar.style.width="0%";}};window.addEventListener("scroll",animateProgressBar);