Atomic Element · Free
Turn "68% funded" or "step 3 of 5" into something people notice. One free element gives you a line, a ring or a row of dots, styled with your Elementor 4 Classes and filling the moment it comes into view.
The short answer
The Elementor progress bar widget from Animation Addons is a free Elementor 4 Atomic Element that shows a percentage as a line, a circle or a row of dots. It is built from real child parts (Track, Fill, Dot, Percentage label) and fills and counts up once it scrolls into view.
Many "Elementor V4 compatible" addons are classic v3 widgets running inside the new editor. The Animation Addons for Elementor Progress Bar is a native Atomic Element, so track, fill and label follow your Elementor 4 Classes and Variables.
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (open container) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Progress Bar Track > Progress Bar Fill, Progress Bar Label (Percentage), Progress Bar Dot; also accepts Heading, Paragraph, SVG, Image, Divider, Flexbox, Div Block |
| Settings | Percentage (0–100), Display Percentage |
| Presets | Line (on drop), Circle, Dot |
| Animation | Plays once when 30% of the bar is visible: width fills or ring draws over about 1.4 s while the number counts up; dots light up in turn |
| Values | Entered by hand in the editor; not pulled from live data |
| Reduced motion | The fill animation plays even when a visitor has reduced motion turned on |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with the Progress Bar and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
Four thin bars stacked, each with the skill name on the left and the percentage on the right, filling one after another as the section appears.
Three rings in a row on a dark background, each with the number in the centre and a caption underneath.
One thick rounded bar in brand green, "68% of our goal" above it, a donate button below.
Five round dots in a row; three filled, two outlined, with "Step 3 of 5" beside them.
Three cards (Design, Build, Launch), each with a compact bar and no percentage text, for a calm look.
Features
Every option below is a real control in the Progress Bar panel or part of how the element renders. Nothing here needs custom code.
Apply Preset switches between Line, Circle and Dot; the same script animates whichever shape is inside.
The bar waits until 30% of it is on screen, then fills and the number counts up from 0. Bars already visible on load play right away, and it never replays on scroll back.
Display Percentage off leaves only the bar or ring.
Track, Fill and Percentage label are separate children with their own height, radius, colour, gradient and typography controls.
The Progress Bar is an open container: add a Heading, Paragraph, icon or image inside and lay them out with Flexbox.
One small script and stylesheet, no animation library. It stops watching the bar once it has played.
Built on the atomic base
Why it mattersUpdate one Class and every bar on the site changes.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Download freeInstall Animation Addons for Elementor and open a page with the Atomic Editor on.
Drag Progress Bar onto the canvas. It drops in as a Line bar.
Optional: Apply Preset → Circle or Dot.
Set Percentage and choose whether to Display Percentage.
Style Track, Fill, Dot or the label; add a Heading for the bar's name.
Publish and scroll to the bar to see it fill.
Honest comparison
Elementor's free classic Progress Bar is fine for a simple labelled line: title, percentage, inner text, and colour, height and radius options. Animation Addons adds shapes and the Atomic workflow.
| Feature | Elementor Progress Bar (classic, Free) | Animation Addons Progress Bar |
|---|---|---|
| Plan | Free | Free |
| Native Elementor 4 Atomic Element | No, classic v3 widget | Yes |
| Shapes | Linear only | Line, Circle, Dot |
| Show or hide the percentage | Yes | Yes |
| Styled with Elementor 4 Classes and Variables | No | Yes |
| Extra content inside (heading, caption, icon) | Title and inner text fields | Any atomic element you add |
Compared with Elementor 4.3.3 (September 2026).
Who it's for
The people who get the most out of it, and what they use it for.
Showing skills and results on portfolio and about pages.
Tracking a fundraising goal.
Showing onboarding or completion steps.
FAQ
Install the free Animation Addons for Elementor plugin and drag the Progress Bar element onto your page. Set the Percentage and publish. The Animation Addons Progress Bar waits until it scrolls into view, then fills and counts up from zero. Use Apply Preset to switch between the Line, Circle and Dot looks.
Add the Animation Addons Progress Bar, open Apply Preset and choose Circle. The element becomes an SVG ring with the percentage in the centre. Set the Percentage, then change the ring's stroke colour and thickness and the label's typography in their Style panels. The ring draws itself when it scrolls into view.
Yes. Apply the Dot preset to the Animation Addons Progress Bar. It shows five Progress Bar Dot elements, and the dots up to your Percentage fill one after another, so 60% lights three of five. Add a Paragraph such as "Step 3 of 5" so the step is also written in text.
No. The Animation Addons Progress Bar shows the Percentage you type into the editor. It does not read live donation totals, course progress or WooCommerce data. When your number changes, update the Percentage and republish. For live figures, use a tool that connects to that data source.
Not on its own. The Animation Addons Progress Bar plays its fill and count-up even when a visitor has asked their system to reduce motion. The animation is short, plays once and never loops. If motion is a concern for your audience, use Display Percentage with a written value in nearby text.
Partly. The Animation Addons Progress Bar label starts as "0%" in the page HTML and counts up only in the browser, so crawlers and some screen readers may read 0%. Write the real value in a heading or caption, such as "68% funded", whenever the number matters.
Yes. The Animation Addons Progress Bar is a free Elementor 4 Atomic Element that works on Elementor Free, with no Elementor Pro needed. Track and Fill widths are percentage-based, so line bars stretch to fit any screen, and each child has its own responsive style controls for phones and tablets.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Progress Bar on the same page or template.
Line, ring and step dots in one free, native Elementor 4 element.
