Blog posts and guides
Encourage readers to finish long posts by showing what is left.
Content / widget · Elementor module
Article Reading Progress Plugin for Elementor
Add a bar that fills as visitors scroll through your article, inline or fixed to the top or bottom of the window, with an optional percentage.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Article reading progressProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
A progress bar that follows the article
These are the actual published outputs of the widget measuring the sample article section directly below: the default thin bar and an indigo bar with the percentage. Scroll to watch them fill.
02 / Inside WordPress
Article reading progress controls in Elementor
Content › Region measures this page's Elementor content or a container you choose by CSS ID. Behaviour sets whether progress runs from the top reaching the top of the window to the bottom reaching the bottom, or from entering to leaving the window. Display sets the spoken label, the percentage and the placement: inline, or fixed to the top or bottom with a layer setting. The Style tab covers the bar height, corner radius, track and fill colours, and the percentage text.
03 / Website use cases
Where to use article reading progress
On a long article readers cannot tell how much is left, and many give up halfway. Article reading progress shows a bar that fills as they scroll through the article, measured on the article itself rather than the whole page, and reports the value to screen readers as a real progress bar.
Documentation pages
Show progress through a long help article.
Landing pages with long copy
Give visitors a sense of length on a story-style page.
04 / Installation and setup
How to add a reading progress bar in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Article reading progress in the Complementor library.
Add the widget to your article page or single post template.
Keep This page's Elementor content, or give the article container a CSS ID and choose it.
Choose inline, or fixed to the top or bottom of the window.
Style the bar, publish and scroll to check it fills to 100%.
05 / Content and style controls
Customize article reading progress in Elementor
Configure the settings available for this module to suit the page you are building.
Measures this page's content or one container you choose by CSS ID.
Two progress rules: fill the window, or enter to leave.
Inline, fixed top (below the WordPress toolbar) or fixed bottom.
Optional percentage text next to the bar.
A real progress bar for screen readers with its own label and value.
Style: height, radius, track and fill colours, percentage typography and colours.
06 / Choose the right approach
Article reading progress and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Whole-page scroll indicators
Most bars measure the whole page, including comments and footer. This one measures the article itself.
Elementor Pro Table of Contents
A table of contents shows the structure; a progress bar shows how far through it the reader is. They work well together.
07 / Requirements and compatibility
Article reading progress compatibility with Elementor
- Requires Elementor.
- One region per bar.
- No reading-time estimate (see Reading time).
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot article reading progress
Check these settings if the published page behaves differently from the editor.
Why does the bar stay at 0%?
No element has the CSS ID you entered. The editor shows a note when the region is not found.
Why does it jump straight to 100%?
The measured region is shorter than the window. Choose the enter-to-leave rule, or measure a longer region.
Why is the fixed bar not fixed in the editor?
Fixed bars are shown inline while editing so they do not cover the panel. They are fixed on the published page.
Is it hidden by the WordPress toolbar?
No. A top bar sits just below the toolbar when you are logged in.
Article reading progress plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Is it accessible?
Yes. It is a progress bar with a label and a value in percent for screen readers.
Does it slow scrolling down?
No. One shared listener updates at most once per frame.
Can I use it in a single post template?
Yes. Give the post content container a CSS ID and measure that.
Does it respect reduced motion?
Yes. The fill does not animate when the visitor prefers reduced motion.
10 / Annual All Access subscription
Get article reading progress with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.