Scroll Progress Indicator
Home
Snippets
Scroll Progress Indicator
HTML
CSS
JS
<div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <div class="content"> <h1>Scroll to See Progress</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet lorem nec velit accumsan.</p> <p>... (repeat or add lots of content here to scroll) ...</p> <p style="margin-bottom: 2000px;">Keep scrolling down the page to test the progress bar.</p> </div>
body { margin: 0; font-family: sans-serif; line-height: 1.6; } .progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 5px; background: #e0e0e0; z-index: 9999; } .progress-bar { height: 100%; width: 0%; background: #3b82f6; transition: width 0.1s ease-out; } .content { padding: 20px; max-width: 700px; margin: 60px auto; }
window.addEventListener('scroll', () => { const winScroll = window.scrollY; const height = document.body.scrollHeight - window.innerHeight; const scrolled = (winScroll / height) * 100; document.getElementById('progressBar').style.width = scrolled + "%"; });
Ad #1
Ad #2
Scroll to Top