Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Progress Bar for Elementor Animated skill bars, circles and dots that fill on scroll

Show skills, goals and completion levels with an Elementor animated progress bar. Pick a line, a circle or a row of dots, set the percentage and colors, and the bar fills when visitors reach it. It is a free Elementor progress bar, and it works on Elementor Free.

Try it free See the live demos
  • Free on WordPress.org
  • Fills on scroll
  • Line, circle or dots
  • Percentage label

Classic widget · Elementor 3 and 4Updated

Live demos

Six progress bar designs, live

Six ways to use an Elementor progress bar, each on a small site. Every bar fills when it scrolls into view. Press Replay to watch it again.

Arolax®WorkStudioContact
Capabilities

What our studio does best

Twelve designers, one shared system. These are the skills clients hire us for most, measured by last year's projects.

Interface design

85%

Prototyping

90%

Design systems

85%
Skill bars

Elementor skill bar for an agency

The studio page of a design agency. Three thin bars show how much of last year's work used each skill, with the percentage over the end of each bar. The list slides in from the left as the bars fill.

Press Replay

Set Style to One, Stroke Width to 1.54 and Trail Width to 1.8, and Background Color to navy. The slide-in comes from the Animation tab (Pro).

Maison FormeProjectsTeamContact
Team · Lea Marsh

Lead designer, skill by skill

Interface

98%
  • Prototyping
  • User interface
  • Web design
  • App design

Motion

92%
  • Micro-interactions
  • Page transitions
  • Scroll effects
  • Video edits

Layout

84%
  • Print design
  • Editorial
  • Typography
  • Typesetting

Front end

64%
  • JavaScript
  • HTML
  • CSS
  • Frameworks

Back end

49%
  • Databases
  • APIs
  • Routing
  • Hosting
Skills table

Elementor circle progress bar in a table

The team page of an interior studio. A table lists five skills, each with an icon, a small circle and the topics it covers. The circles fill in their own color and the rows rise in one by one.

Press Replay

Set Style to Two, Size to 80 px, Stroke Width to 4 and Trail Width to 1. Each circle has its own Color.

Halden GrowthServicesCasesContact
Services

What clients ask for most

Share of launch projects last year that included each service.

60%

Strategy

A launch plan built around one clear goal, with a budget and a date for every step.

95%

Audience

Who buys, why they buy and where they spend time, mapped before we write a word.

70%

Keywords

Search terms ranked by intent, so every page answers a question people ask.

Service stats

Large circles beside the text

The services page of a marketing agency. Three big outline circles zigzag down the page, each beside a short text. The number sits in the middle and the ring draws itself clockwise.

Scroll to fill

Set Style to Two and Size to 190 px. Stroke Width and Trail Width are both 2, and Background Color is transparent, so only the fill shows.

NorthlightProductEngineeringCareers
Engineering

Our stack, by share of projects

How often each part of the stack shows up in the client work we shipped this year.

70%

HTML, CSS

90%

WordPress

80%

JavaScript

70%

APIs

90%

PHP, MySQL

Tech stack

Five thick rings in a row

The engineering page of a software company. Five thick rings show how often each part of the stack appears in client work, with a label under each. They slide in from the left one after another.

Press Replay

Set Style to Two, Size to 110 px, Stroke Width and Trail Width to 15, and Background Color to navy. The slide-in comes from the Animation tab (Pro).

Sahara FilmsFilmsStudioClients
Client survey 2026

How sure clients feel, stage by stage

We ask every client three times during a production. These are the shares who answered "very sure" at each stage.

After the brief

62%

Mid-production

78%

At delivery

94%
Survey results

Thick bars with end labels

The client survey page of a production company. Three thick yellow bars show how sure clients feel at each stage of a film, with the percentage at the right end of each bar. The block fades up from below.

Press Replay

Set Style to One, Stroke Width and Trail Width to 6.5, Color to yellow and Position Y to -35 px.

ShallyNew inJournalAbout
Portrait of Noor Selim, founder of Shally

Noor Selim

Founder and designer · Porto

Languages

English (Native)

Spanish (Medium)

Hindi (Fluent)

French (Basic)

Rating dots

Elementor dot progress bar for languages

The about page of a fashion label, with its founder's profile. Five small dots per language fill one by one, half a second apart. The Languages title is revealed letter by letter.

Press Replay

Set Style to Three, Size to 13 px and Border Width to 1 px. The title reveal is Text Animation on a Title widget (Pro).

Features

Key features of the Progress Bar

Every feature below is a real setting in the widget panel. Nothing needs custom code.

Line, circle or dots

Choose the Style: One is a flat line, Two is a circle and Three is a row of five dots for ratings.

Elementor progress bar percentage

Set the Percentage from 0 to 100 with the slider, or pull it from a dynamic tag.

Elementor progress bar on scroll

The animation starts once, when the bar scrolls into view: 1.4 s for lines and circles, one dot every 0.5 s.

Show the number

Turn Display Percentage on to print the value, such as 85%, over the end of the line or inside the circle.

Elementor progress bar color

Set the fill with Color and the empty part with Background Color. For dots, they set the outline and the filled dots.

Thickness

Use Stroke Width for the fill and Trail Width for the track behind it, from hairline to a thick ring.

Size and border

Set the Size of a circle or of each dot per device, and the Border Width of the dots.

Percentage style

Style the label with its own Color and Typography, and move it up or down on a line with Position Y.

Step by step

How to add a progress bar in Elementor

Five steps, no code. The bold names are the labels in the Elementor panel.

  1. Install and activate Animation Addons for Elementor from WordPress.org, and turn on Progress Bar under Animation Addons, Elements.

  2. Open your page in Elementor, search the panel for Progress Bar and drag the Animation Addons widget onto the page.

  3. Pick the Style, set the Percentage and choose whether to Display Percentage.

  4. In the Style tab, set the Color, Background Color, Stroke Width, Trail Width and Size.

  5. Add a Heading above the bar for its label, style the percentage, check it on mobile and publish.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about the Progress Bar

How do I add an animated progress bar in Elementor?

Install the free Animation Addons plugin, drag the Progress Bar widget onto your page, pick a Style and set the Percentage. It fills when visitors scroll to it, on Elementor Free.

Is the Progress Bar widget free?

Yes. It is part of the free Animation Addons plugin on WordPress.org and works with Elementor Free and Elementor Pro.

How do I make a circle progress bar in Elementor?

Set Style to Two. The widget draws a circle with the percentage in the middle. Use Size for its width, and Stroke Width and Trail Width for how thick the ring is.

Can I use dots for a rating instead of a line?

Yes. Style Three shows five dots and fills one dot for every 20 percent, so 70% fills three. It suits language levels and star-style ratings.

When does the progress animation start?

When the bar scrolls into view. It plays once: a line or circle fills in 1.4 seconds, and dots light up one every half second.

Can I change the fill speed or easing?

No. The widget uses a fixed 1.4 second linear fill and a 0.5 second step for dots. To delay or move the whole bar, use an entrance animation on its container.

How do I add a title above the skill bar?

The widget has no title field. Put a Heading or Title widget above it, as in every demo on this page, and keep both in one container.

How do I make the line thicker?

Raise the Stroke Width and Trail Width. The line height is that number as a percent of the bar width, so 2 on a 500 px bar draws 10 px.

How do I change the progress bar color?

In the Style tab, open Progress Bar and pick a Color for the fill and a Background Color for the track behind it. The percentage label has its own Color.

Should I use this or Elementor's Progress Bar?

Use this widget for circles, dot ratings or custom stroke and trail widths. Use Elementor's for a plain bar with a built-in title or text inside the bar.

Animation Addons Pro · Elementor 4

Progress that fills on scroll

Animated skill bars, circles and dot ratings with a percentage label, free on Elementor Free.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license