Content · Elementor
Reading Progress Bar widget for Elementor
A thin bar that fills as the visitor reads the page. Put it on long articles, not on a homepage grid.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A thin bar that fills as the visitor reads the page. Put it on long articles, not on a homepage grid.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Reading Progress Bar”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Position”, “Height (px)”, “Background”, “Z-Index”. Style and Content tabs are listed on this page.
When to use it
- A long-form post.
- Documentation.
- A research article.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Position | The chosen value is read in render() and applied on the front end. Options: Top; Bottom. |
| General — Height (px) | Writes CSS `height` onto the widget’s front-end markup. (default 5, min 1). |
| General — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-reading-progress-bar`. |
| General — Z-Index | Writes CSS `z-index` onto the widget’s front-end markup. (default 999). |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Reading Progress Bar actually change on the page?
A thin bar that fills as the visitor reads the page. Put it on long articles, not on a homepage grid. Inspector labels from this widget’s PHP include “Position”, “Height (px)”, “Background”, “Z-Index”.
How do I add Reading Progress Bar in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Reading Progress Bar”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Timeline Post/Story
A vertical or horizontal timeline for events, history, or a changelog.
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Charts
Bar, line, pie, or radar charts from values you enter in the widget.
Posts Grid & Slider
Posts in a grid, slider, or carousel with query and layout controls (the Posts Grid widget).
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Reading Progress Bar after you activate it.