Reading Progress Bar
Show readers how far through an article they are.
A thin bar at the top or bottom of the screen that fills as visitors read — the article or the whole page — with colour, gradient, track, glow, rounded end and an optional percentage label, designed live in the Customizer. Sits under a sticky header.
Extension
Requirements
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
- Switch it on in Moduly → Installed Widgets.
- Click Manage on it — this opens Appearance → Customize with the Reading Progress Bar settings, next to a live preview.
- Change the settings; the preview updates as you go.
- Click Publish to make it live.
Settings
General
| Setting | What you can set |
|---|
| Show the reading progress bar | — |
| Measure | The article or The whole page · The article: full once its last line is on screen, so comments and the footer don't count. |
| Article selector (optional) | Empty: found automatically (post content block, .entry-content, Elementor and Divi post content, article, main). |
Where
| Setting | What you can set |
|---|
| Show on | Single posts, Posts, pages and other single items, Every page or Chosen pages or posts (IDs) |
| IDs | Text |
| Devices | All, Desktop or Phones |
Bar
| Setting | What you can set |
|---|
| Colour | Colour |
| Gradient to (optional) | Clear it for a flat colour. |
| Track (optional) | The unfilled part. Empty: see-through. |
| Thickness | 2–16 |
| Rounded end | — |
| Glow | — |
Position
| Setting | What you can set |
|---|
| Position | Top or Bottom |
| Sit under a sticky header | Follows the bottom of a header kept on screen by the Sticky Header extension. |
| Hide until reading starts | — |
Percentage
| Setting | What you can set |
|---|
| Show the percentage | A small label that rides along the end of the bar. |
| Label background | Colour |
| Label text | Colour |
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- On very short articles (shorter than the screen) the bar jumps from 0 to 100 % once the end is visible. That is correct, but abrupt.
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
