Content · Elementor
Progress Bar widget for Elementor
A bar that shows a percent or goal (skills, fundraising, completion).
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 bar that shows a percent or goal (skills, fundraising, completion).
render() writes HTML data attributes: data-circle-options, data-options.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
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 “Progress Bar”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Layout”, “Max Value”, “Counter Value”, “Title”. Style and Content tabs are listed on this page.
When to use it
- A skill list.
- A campaign goal.
- A course completion teaser.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Layout | The chosen value is read in render() and applied on the front end. Options: Circle; Horizontal Line; Vertical Line (Pro). |
| General — Max Value | Numeric value used in this widget’s render/JS (default 100, min 0). |
| General — Counter Value | Numeric value used in this widget’s render/JS (default 70, min 0). |
| General — Title | Printed in the widget HTML from render(). |
| General — Title Position | The chosen value is read in render() and applied on the front end. Options: Inside; Outside. |
| General — Subtitle | Printed in the widget HTML from render(). |
| General — Show Counter | Switcher inspector control (`counter_switcher`). |
| General — Counter Position | The chosen value is read in render() and applied on the front end. Options: Inside; Outside. |
| General — Follow Pr. Line | Switcher inspector control (`counter_follow_line`). |
| General — Counter Prefix | Text inspector control (`counter_prefix`). |
| General — Counter Suffix | Text inspector control (`counter_suffix`). |
| General — Show Thousand Separator | Switcher inspector control (`counter_separator`). |
| Settings — Circle Size | Writes CSS `max-width` onto the widget’s front-end markup. (min 100, max 1000). |
| Settings — Line Size | Writes CSS (height, width) onto the widget’s front-end markup. (min 0, max 100). |
| Settings — Vertical Line Height | Writes CSS `height` onto the widget’s front-end markup. (min 0, max 1000). |
| Settings — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 1, min 0, max 10). |
| Settings — Animation Delay | Writes CSS `transition-delay` onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Settings — Animation Timing | The chosen value is read in render() and applied on the front end. |
| Settings — Animation Loop (Pro) | Switcher inspector control (`anim_loop`). |
| General — Background Color | Writes CSS (fill, background-color) onto the widget’s front-end markup. |
| General — Inactive Line Color | Writes CSS `stroke` onto the widget’s front-end markup. |
| General — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-prbar-hr-line, {{WRAPPER}} .king-addons-prbar-vr-line, {{WRAPP…`. |
| General — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| General — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| General — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| General — Border Radius | Writes CSS (border-radius, border-top-right-radius, border-bottom-right-radius, border-top-left-radius) onto the widget’s front-end markup. |
| General — Background Type | The chosen value is read in render() and applied on the front end. Options: Classic; Gradient. |
| General — Background Color (Circle Prline Bg Color) | Color written to this widget’s CSS selector. |
| General — Background Color A | Color written to this widget’s CSS selector. |
| General — Background Color B | Color written to this widget’s CSS selector. |
| General — Gradient Angle | Spacing/size control (min 0, max 360). |
| General — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-prbar-hr-line-inner, {{WRAPPER}} .king-addons-prbar-vr-line-inner`. |
| General — Rounded Line | Switcher inspector control (`prline_round`). |
| General — Stripe Background (Pro) | Switcher inspector control (`stripe_switcher`). |
| General — Color | Writes CSS `color` onto the widget’s front-end markup. |
| General — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-prbar-title`. |
| General — Distance | Writes CSS (margin-bottom, margin-top) onto the widget’s front-end markup. (min 0, max 50). |
| General — Color (Subtitle Color) | Writes CSS `color` onto the widget’s front-end markup. |
| General — Typography (Subtitle Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-prbar-subtitle`. |
| General — Distance (Subtitle Distance) | Writes CSS (margin-bottom, margin-top) onto the widget’s front-end markup. (min 0, max 50). |
| General — Color (Counter Color) | Writes CSS `color` onto the widget’s front-end markup. |
| General — Typography (Counter Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-prbar-counter`. |
| General — Distance (Counter Distance) | Writes CSS (margin-bottom, margin-top) onto the widget’s front-end markup. (min 0, max 50). |
| General — Vertical Position | Writes CSS `align-self` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| General — Font Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 100). |
| General — Distance (Counter Prefix Distance) | Writes CSS `margin-right` onto the widget’s front-end markup. (min 0, max 25). |
| General — Vertical Position (Counter Suffix Vr Position) | Writes CSS `align-self` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| General — Font Size (Counter Suffix Size) | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 100). |
| General — Distance (Counter Suffix Distance) | Writes CSS `margin-left` onto the widget’s front-end markup. (min 0, max 25). |
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
Which Progress Bar options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Progress Bar in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “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
Charts
Bar, line, pie, or radar charts from values you enter in the widget.
Reading Progress Bar
A thin bar that fills as the visitor reads the page. Put it on long articles, not on a homepage grid.
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.
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Callout Box
A note, tip, or warning box with an icon and optional button.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Progress Bar after you activate it.