The Progress Bar module shows a bar across the top or bottom of the screen that fills as visitors scroll. It tells readers how far through the page they are and how much is left.
Switch it on: Essentials → Modules → Progress Bar.
Configure it: Essentials → Progress Bar.
General Settings
| Setting | What it does | Default |
|---|---|---|
| Display Position | Top or Bottom of the screen. | Bottom |
| Show On | Entire site, or Selected post types only. | Entire site |
| Post Types | When Show On is set to selected post types, single posts of the types you tick show the bar. All public post types are listed, including custom ones such as products. | Post |
Top bar and the admin bar: when you’re logged in, a top progress bar sits just below the WordPress admin bar instead of hiding behind it. Visitors who aren’t logged in see it at the very top.
Style
| Setting | What it does | Default |
|---|---|---|
| Thickness | Bar height, in pixels (2–40). | 15 |
| Bar Color | The fill color. | #000000 |
| Gradient | Fade the bar from the Bar Color into a second color. | Off |
| Gradient End Color | The color the gradient fades into. | #4caf50 |
| Percentage | Show the percentage read (for example "42%") on the bar. | On |
| Percentage Color | Color of the percentage text. | #ffffff |
Tip: the percentage label needs room. On a thin bar (under about 12px), switch Percentage off for a cleaner look.
Customizing the markup
Developers can change the bar’s HTML with the esse_module_esse_progress_bar_output filter. See the Developer Reference.
Troubleshooting
The bar doesn’t show on some pages. If Show On is set to Selected post types only, the bar only appears on single posts of the ticked types, not on the home page, archives or other post types. Switch to Entire site to show it everywhere.
The bar barely moves. Progress is measured against the whole page height. On a short page there’s little to scroll, so the bar fills quickly or hardly at all.
A bottom bar is covered. A bottom Announcement Bar (Pro) automatically moves the progress bar above it. With another plugin’s bottom bar, switch the Progress Bar to Top.