← All elements
<div class="rp"><i class="bar"></i><div class="txt"><h4>Reading progress</h4><p>Scroll this panel and watch the bar at the top.</p><p>It is tied to the scroll position directly.</p><p>No event listeners are involved.</p><p>The browser maps the range for you.</p></div></div>About this animation
A thin reading-progress bar that fills as the content scrolls, using animation-timeline: scroll() and no script.
How it works
The text area names a scroll timeline, and a thin bar outside it uses that timeline for an animation from scaleX(0) to scaleX(1). As you scroll, the bar fills in step with your position, with no script. The transform origin is the left edge, so it grows from left to right.
Ways to customise it
- Change the gradient colours of the bar.
- Make the bar thicker by editing its height.
- Place the bar at the bottom by changing top to bottom.
Good to know
It relies on scroll-driven animations, which current Chromium and Safari support, and where they are missing the bar simply stays empty. It is a visual cue, so it adds no meaning for screen readers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.