Elementor Progress Bar Widget
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor progress bar widget shows a percentage as a bar or a circle: skills, project status, fundraising goals or upload progress.
- Widget name MoxKit Progress Bar
- Panel category MoxKit Addons
- Settings 22+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor progress bar widget?
Choose a layout, a status color (default, active, success, neutral) and whether the bar fills when it scrolls into view.
Like every MoxKit widget, the Progress Bar has Content and Style tabs with responsive settings, typography, colors and box styling, and it keeps Elementor's Advanced tab. You can switch it off under MoxKit > Widgets if you do not use it; a disabled widget loads no files.
Key features
- Four layouts: Basic (a plain bar), Label & status (label and percentage above the bar), Compact with metadata (a thin bar with an extra line of text) and Circular (a ring with the percentage in the middle).
- Label, percentage (0–100) and an optional metadata line such as "24 of 24 files".
- Status colors: default, active, success and neutral, so finished items can turn green.
- Animate on scroll: the bar fills from zero when it enters the screen; visitors with reduced motion see it filled.
- Style sections for the label, the bar (height, radius, track and fill colors), the circle (size, stroke) and the metadata text.
How to add the Elementor progress bar widget
Follow these steps to add the widget to a page. You need MoxKit Addons for Elementor installed and Elementor active.
- Open the page in Elementor (Pages > Edit with Elementor).
- In the widget panel, search for "Progress Bar" or scroll to the MoxKit Addons category.
- Drag the Progress Bar widget into a Container.
- Choose the Layout scheme.
- Type the label and percentage.
- Pick a status color and keep Animate on scroll on.
- Click Update (or Publish) to save the page.
Elementor progress bar widget settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 1 sections and about 7 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Progress bar
| Setting | Type | Options and notes |
|---|---|---|
| Layout scheme | Select | Basic, Label & status, Compact with metadata, Circular (default: Label & status) |
| Label | Text | |
| Percentage | Number | |
| Show percentage | Toggle | On / Off (default: On) |
| Status color | Select | Use the label or metadata to describe the status. Custom fill color in Style overrides this preset. Default, In progress (blue), Complete (green), Neutral (gray) (default: Default) |
| Metadata | Text | |
| Animate on scroll | Toggle | On / Off (default: On) |
Elementor progress bar widget settings: Style tab
The Style tab controls the look of every part of the widget: 4 sections, about 15 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Label
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Bar
| Setting | Type | Options and notes |
|---|---|---|
| Fill color | Color | |
| Track color | Color | |
| Percentage color | Color | |
| Typography | Group | All the usual Elementor typography settings. |
| Height per device | Slider | |
| Corner radius per device | Slider |
Circle
| Setting | Type | Options and notes |
|---|---|---|
| Diameter per device | Slider | |
| Ring thickness per device | Slider | |
| Line ends | Select | Round, Flat (default: Round) |
Metadata
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Top spacing per device | Slider |
Tips and best practices
- Stack several bars in a column for a skills list, all with the same layout and colors.
- Use the Circular layout for a single headline number, such as a score or a completion rate.
- Keep labels short (one or two words) so they stay on one line on phones.
- Use the success status for completed items and the neutral status for planned ones.
- For a multi-step journey with completed and upcoming steps, use Progress Steps; for a full chart, use the Chart widget.
Progress Bar FAQ
Can it show a circle?
Yes. Choose the Circular scheme.
Can I show extra text?
Yes. The Compact layout shows a metadata line, for example "24 of 24 files".
Summary
The Elementor progress bar widget in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Basic, labeled, compact or circular layouts, status colors and scroll animation. Install MoxKit Addons for Elementor from WordPress.org, drag the Progress Bar widget onto a page and start with the settings above.