Skill Bars

Show skills or progress as bars that fill in.

Skill bars and progress rings that fill and count up on scroll, with value bubbles, gradients, stripes and per-skill colours.

Elementor widget

Requirements

Edit the page with Elementor.
In the widget panel, search for Skill Bars. Our widgets sit in the Moduly category and carry the Moduly badge.
Drag it onto the page.
Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.

Setting	What you can set
Skills	each item: Name, Level (out of 100), Value Text, Icon, Want To Customize?, Text Color, Level Color, Level Second Color or Base Color
Layout	Bars or Circles
Text Position	Text Inside, Text Outside or Name beside the bar
Value	At the end of the line, In a bubble that rides the bar or Hidden
Fill	Solid, Gradient or Striped
Moving Stripes	On / off
Columns	Number
Value Suffix	Text
Name HTML Tag	H3, H4, H5, H6, div, span or p

Setting	What you can set
Fill on Scroll	Bars fill and numbers count up when they come into view. Shown full in the editor.
Duration (ms)	Number
Delay Between Skills (ms)	Number
Easing	Ease out, Ease in and out, Linear or Overshoot
Count Up the Numbers	On / off
Replay Each Time It Scrolls Into View	On / off

Style tab: design controls for Bars, Circles or Colors & Text — colours, typography, spacing, borders and hover states.

Start with the Layout choice — it changes the overall look the most; fine-tune the rest afterwards.
Visitors who ask their device for reduced motion get a calmer, still version automatically.

Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.