This reading progress bar WordPress build sits at the top of the page, giving readers a clear sense of how much of a post is left, and it’s built from nothing more than two divs and one scroll-based interaction.
Build the progress bar container
From the Add panel, add a Div above the first section and rename it, for example to Outer. This will hold the progress bar itself.
Set the Outer div’s position to Sticky with Top at 0, and raise its Z-index so it sits above the rest of the content. Set Overflow to Hidden so nothing extends past its edges. A background color is optional if you want the track itself to be visible.
Inside Outer, add another Div and rename it to Progress bar. Give it a background color and a small height, for example 8 pixels, this is the bar that will actually fill as the page scrolls.
Animate it with scroll
Select the post content, since that’s what determines how far the reader has scrolled, and add a While scrolling interaction from the Interaction tab.
On the progress bar, add a Translate X action. Set its initial value to -100% so the bar starts fully off-screen, and its end value to 0% so it slides in and fills the outer container as the page scrolls.
Set the interaction’s easing to Linear so the bar moves at a constant pace instead of jumping or easing unevenly, then preview the page and adjust the color, height, or easing to match your site.
Result
The page now has a progress bar pinned to the top that fills in smoothly as the reader scrolls through the post, built from two divs and a single scroll-based interaction.