Reading Progress Bar

← All widgetsWidget 81 · emcp_custom_81

Elementor widget1 layout1 content options5 style options2 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: reading, progress, scroll, indicator, bar.

Setup guide

Open a page in Elementor, search the panel for Reading Progress Bar and drag it into a container.
Content › Settings: Position.
Style tab sections: Style. 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.

This widget is fixed to the viewport (a corner button, a bar or a toast). On this page each demo is pinned inside its grey stage box so you can see it in place; on a real page it floats over the content. Scroll-driven options react to the scrolling of this page.

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

Demo

Default

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

Settings

Option	Type	Choices / range	Default	Notes
Position `position`	Dropdown	Top of screen, Bottom of screen	top

Style tab

Style

Option	Type	Choices / range
Height `height`	Slider	min 1, max 40, px
Bar Color `bar_color`	Color
Track Color `track_color`	Color
Corner Radius `bar_radius`	Slider	min 0, max 20, px
Box Shadow `bar_shadow`	Box shadow

Add it with the MCP tools

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