Add a Reading Progress Bar in WordPress (Elementor)
Reading Progress Bar is a free Master Addons extension that adds a thin bar to the top or bottom of the screen and fills it as visitors scroll down the page. You switch it on per page or post in Elementor’s Page Settings, then set the position, height, track color, fill color and animation speed. It suits long articles, tutorials, documentation and legal pages where readers like to know how much is left.
This extension tracks scrolling. To show a goal or a score as a line, circle or fan gauge, use the Progress Bar widget. For a list of skill bars, use Progress Bars.
Turn It On Per Page, Top or Bottom
Open the page or post in Elementor, click the gear icon for Page Settings (Post Settings on posts) and expand the Reading Progress Bar section. Switch on Enable Reading Progress Bar and set Position to Top or Bottom. The bar is fixed to the edge of the screen and fills from 0 to 100% as the visitor scrolls from the top of the page to the bottom.
- The setting is saved per page, so enable it on long posts and leave it off short pages. There is no site-wide switch.
- It works on pages and posts built with Elementor, since the switch lives in Elementor’s Page Settings.
- Progress covers the whole page height, including the header, comments and footer, not only the article text.
- For logged-in users the bar moves down below the WordPress admin bar.
Height, Colors and Animation Speed
Set Height from 0 to 100px (5px by default). Background Color colors the empty track (white by default) and Fill Color colors the progress (blue #007bff by default). Animation Speed sets how smoothly the fill follows the scroll, from 0 to 1000 milliseconds, 50 by default.
- You can pick global colors from your Elementor kit for the track and fill.
- A 3 to 6px bar is noticeable without covering the header.
- A lower Animation Speed feels more direct, a higher one smoother but slightly delayed.
Elementor Pro Progress Tracker vs Reading Progress Bar
Elementor Pro has a Progress Tracker widget that does a similar job with more options. Here is how the two compare.
| Feature | Elementor Pro Progress Tracker | Master Addons Reading Progress Bar |
|---|---|---|
| Price | Needs Elementor Pro | Free with Master Addons |
| How you add it | A widget, usually placed in a header or single post template | A switch in each page’s Page Settings |
| Shapes | Horizontal or circular | Horizontal bar |
| Tracks | Entire page, post content or a CSS selector | Entire page |
| Percentage label | Yes, optional | No |
| Placement | Wherever you put the widget, with direction options | Fixed to the top or bottom of the screen |
Choose Elementor Pro’s Progress Tracker if you need it on every post from one template, a circular style or progress through the article only. Choose Reading Progress Bar for a free, simple bar on selected pages. Pair it with the free Table of Contents widget on long posts.
How to Add a Reading Progress Bar in WordPress
You need Elementor and the free Master Addons plugin, with the page or post edited in Elementor.
- Install and activate Master Addons from WordPress.org, and check that Reading Progress Bar is enabled in Master Addons, Extensions.
- Open the post or page with Elementor.
- Click the gear icon to open Page Settings (Post Settings on posts).
- Expand Reading Progress Bar and turn on Enable Reading Progress Bar.
- Choose Top or Bottom, then set Height, Background Color, Fill Color and Animation Speed.
- Update the page and scroll it on the front end to check the bar.
Frequently Asked Questions For Reading Progress Bar
Is the Reading Progress Bar free?
Yes. It is a free extension in the Master Addons plugin on WordPress.org and works with free Elementor. It shows on phones and tablets too, fixed to the top or bottom edge.
Can I add it to some pages but not others?
Yes, and that is the only way it works. The switch is in each page’s or post’s Elementor Page Settings, so turn it on for long posts and leave it off elsewhere. There is no global setting to add it to every post at once.
Will this slow down my website?
No. It adds a small inline script and a few lines of CSS on pages where it is enabled, with no extra files or images.
Does it measure only the article or the whole page?
The whole page. The fill runs from the top of the page to the very bottom, so headers, comments and footers count too. Elementor Pro’s Progress Tracker can track only the post content if you need that.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
