Progress Bars

← All widgetsWidget 152 · emcp_custom_152

Elementor widget7 layouts9 content options18 style options3 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: progress, skill, bar, percentage, stats.

Setup guide

Open a page in Elementor, search the panel for Progress Bars and drag it into a container.
Content › Bars: Bars, Style, Show Value, Count Up Number, Animate on Scroll, Animation Duration (ms), Stagger Between Bars (ms), Segments (segmented / dots) and 1 more.
Pick a Style: Rounded, Flat square, Thin line, Segmented blocks, Value in tooltip bubble, Value inside the fill, Dot scale. Each one is shown below.
Style tab sections: Bar, Text. Colours, typography and spacing set here are scoped to this widget instance.
Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.

Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.

Layout

Rounded

Style = rounded

Design0%

Development0%

Marketing0%

Support0%

Layout

Flat square

Style = flat

Design0%

Development0%

Marketing0%

Support0%

Layout

Thin line

Style = thin

Design0%

Development0%

Marketing0%

Support0%

Layout

Segmented blocks

Style = segmented

Design0%

Development0%

Marketing0%

Support0%

Layout

Value in tooltip bubble

Style = tooltip

Layout

Value inside the fill

Style = inside

Design0%

Development0%

Marketing0%

Support0%

Layout

Dot scale

Style = dots

Design0%

Development0%

Marketing0%

Support0%

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Bars

Option	Type	Choices / range	Default
Bars `bars`	Repeater		4 items
↳ Label `label`	Text		Design
↳ Value `value`	Number	min 0, max 1000	80
↳ Max (default 100) `max`	Number	min 1, max 100000	100
↳ Suffix `suffix`	Text		%
↳ Fill Color Override `color`	Color
↳ Icon `icon`	Icon
↳ Right-side Note `note`	Text
Style `style`	Dropdown	Rounded, Flat square, Thin line, Segmented blocks, Value in tooltip bubble, Value inside the fill, Dot scale	rounded
Show Value `show_value`	Toggle	on / off	yes
Count Up Number `count_up`	Toggle	on / off	yes
Animate on Scroll `animate`	Toggle	on / off	yes
Animation Duration (ms) `duration`	Number	min 100, max 6000	1200
Stagger Between Bars (ms) `stagger`	Number	min 0, max 1000	150
Segments (segmented / dots) `segments`	Number	min 2, max 30	10
Label Position `label_pos`	Dropdown	Above bar, Left of bar, Inside the track	above

Style tab

Bar

Option	Type	Choices / range	Default
Height `height`	Slider	min 2, max 60, px	10
Track Color `track`	Color		#eaecf0
Fill Color `fill`	Color		#6a11cb
Radius `radius`	Slider	min 0, max 99, px	99
Track Border `track_border`	Border
Fill Shadow `fill_shadow`	Box shadow
Space Between Bars `gap`	Slider	min 0, max 80, px	22
Label Width (left layout) `label_w`	Slider	min 60, max 400, px	140

Text

Option	Type	Choices / range	Default
Label Typography `label_typo`	Typography
Label Color `label_color`	Color		#101828
Value Typography `value_typo`	Typography
Value Color `value_color`	Color		#475467
Note Color `note_color`	Color		#98a2b3
Icon Color `icon_color`	Color		#6a11cb
Icon Size `icon_size`	Slider	min 10, max 40, px	16
Tooltip Background `tip_bg`	Color		#101828
Tooltip Text `tip_color`	Color		#ffffff
Label to Bar Gap `head_gap`	Slider	min 0, max 30, px	8

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_152" and a settings object using the keys above. Run get-custom-widget with id 152 for the full JSON spec.