//HTML <div id="progress-bar"></div> //CSS #progress-bar { height: 5px; background-color: grey; position: fixed; top: 0; left: 0; width: 100%; } //JS const progressBar = document.getElementById('progress-bar'); window.addEventListener('scroll', function() { const scrollTop = window.scrollY; const documentHeight = document.documentElement.scrollHeight; const windowHeight = window.innerHeight; const progress = scrollTop / (documentHeight - windowHeight); progressBar.style.width = `${progress * 100}%`; });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter