SlowlyReading progress
A scroll-driven progress bar for the page or a chosen container, with an optional percentage and reading time.
The reading progress block is a thin bar that fills as the visitor scrolls, tracking either the whole page or one chosen container. By default the fill is pure CSS, a scroll-driven animation with no script involved, so the bar costs nothing on pages that don't need the extra readout options.
A front-end script loads only when the block actually needs it: showing the percentage as text, tracking a target container instead of the page, or filling in for browsers that don't yet support scroll-driven animation. Reading time, if turned on, is computed server-side from the post's word count, so it never needs the script at all.
Adding one
- Select where the bar should live, usually a fixed position outside the main content flow.
- Open the inserter and search "reading progress".
- Pick the block. The default settings give a page-wide bar fixed to the top.
Settings
In the block's own panel. Appearance beyond fill and track colour lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Fill colour / Track colour | Explicit colours for the moving fill and the bar it sits on | Left empty, the fill uses the block's text colour and the track uses whatever background the design panel sets |
| Position | Fixed to the top, fixed to the bottom, or inline in the page flow | Inline for a bar embedded partway down a long article |
| Height (px) | Bar thickness | Thicker for a bold statement, thinner for a subtle cue |
| Z-index | Stacking order for fixed positions | The bar needs to sit above or below another fixed element, such as a sticky header |
| Hide until scrolled | Bar stays invisible until the visitor moves past the top of the page | Avoiding a full bar showing before there's any progress to show |
| Target container | CSS selector to track instead of the whole page | The bar should reflect progress through one article, not the full page including the footer |
| Show percentage | Adds a live "NN%" readout on the bar | A numeric cue alongside the visual fill |
| Show reading time / Words per minute / Label | Estimated time to read the post, its calculation speed, and the label text | Editorial content where readers want to gauge the commitment upfront |
Styling
Position, height, and z-index are set from the panel above because the bar has to work with zero JavaScript. Everything else, the block's own background (the track, unless Track colour overrides it) and text colour (the fill, unless Fill colour overrides it), comes from the shared design panel.
Accessibility
The bar is marked aria-hidden="true" and carries no progressbar role, on purpose: a screen reader user doesn't consume a page by scroll percentage, and announcing a constantly changing number would add noise without adding information. The scrollbar the browser already provides is the accessible equivalent.