How to set up and style the Progress Bar widget in Elementor.
Progress Bar shows a percentage as a horizontal line or as a circle, with a title and the number. The fill animates from zero when the widget scrolls into view. Use it for skills, goals, funding targets or any value out of 100.
Part of: Bright Addons (free).
| Option | What it does |
|---|---|
| Type | Chooses a Line or a Circle. |
| Title | The label of the bar, shown above a line or below a circle. |
| Percentage | The value to show, from 0 to 100. The default is 85. |
| Show Percentage | Shows the number, beside the title for a line or inside the ring for a circle. |
| Striped | Adds animated diagonal stripes to the line fill. |
| Animation Duration (ms) | How long the fill takes. The default is 1500, and 0 turns the animation off. |
| Alignment | Aligns the circle type left, center or right, per device. |
Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
fill color, track color, and for a line the Fill Gradient End, height and border radius, or for a circle the Circle Size and Line Width.
color and typography for the title and for the percentage.
Yes. Set Type to Circle. Circle Size and Line Width in the Style tab control its look.
The Line type can. Set Fill Color and Fill Gradient End in the Style tab.
Set Animation Duration (ms) to 0 and the bar shows at its final value right away.
No. Each widget shows one bar. Add one widget per value.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide