<div class="progress-bar"></div>
<div class="content">
<h1>Scroll Down</h1>
<p>The blue bar at the top tracks your reading progress automatically.</p>
<p class="placeholder-text">Keep scrolling...</p>
</div>
Back to Snippets
CSS Scroll-Driven Reading Progress Bar
Keep your readers engaged with this reading progress bar. It sits at the top of the viewport and grows as the user scrolls down, powered entirely by the CSS `animation-timeline` property without any JavaScript.
251