What is a progress bar animation?
It's a line that starts collapsed on the left and expands to its final width with an easing curve. Because it animates when the visitor reaches it, the growth draws attention to the number or idea next to it: a skill level, a percentage, a milestone.
How to add an animated progress bar in Elementor
- Drag the Progress Line widget anywhere on the page — it sits inline, like any other widget.
- Set the line color, maximum width and thickness.
- Choose the duration, the delay and the easing curve.
- Publish and scroll to it.
The animation plays once, when at least 25% of the bar is visible on screen.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Line color | Color of the bar | #000000 |
| Max width | Final width of the bar (px or %) | 100% |
| Line thickness | Height of the bar (1–30 px) | 4 px |
| Duration | Time for the bar to fill | 1200 ms |
| Delay | Wait before it starts | 0 ms |
| Easing | Ease Out, Ease In, Ease In Out or Linear | Ease Out |
Staggered skill bars
To build a classic skills section, stack several Progress Line widgets with different max widths (for example 90%, 75%, 60%) and give each one a slightly bigger delay (0, 150, 300 ms). They fill one after another, like a sequence.
Other uses
- Animated section dividers that draw themselves as you scroll.
- Stats and results: a bar under each number.
- Step indicators in a process section.
Why it's light
It uses a CSS transform: scaleX() transition, which the browser animates without layout work, and a native IntersectionObserver to start it — about 5 KB before minification, zero dependencies.
Related effects
- Stacked Cards — cards that pile up while you scroll.
- Blur Text Reveal — text that comes into focus on scroll.
- Text Loop — infinite scrolling text.
