Native Divi 5 ModuleFree

Divi Skill Bar

Progress bars that fill as they scroll into view.

Why use the Divi Skill Bar module?

A progress bar makes a percentage feel concrete: a skill, a project stage, a fill level. Stock Divi has no module for one, so it usually becomes a hand-styled div with the width hard-coded inline.

Skill Bar is a container module: one parent for the panel and spacing, one child item per bar. Level is typed as a percentage, and the label can sit inside the fill or above it.

The bars beside this are the live module.

Divi 5 support

95%

Module coverage

88%

What you get out of it

One item per barAdd, remove or reorder bars the same way as any Divi container module.Label inside or above the fillText Placement moves the name and percentage inside the coloured bar or above it.Name and level, independently hiddenShow the name without the number, the number without the name, or both.Per-item colour and shapeBar colour, track colour, height and radius are all set per item.An optional panel titleThe parent module can carry a heading above the whole set of bars.Free, and native on Divi 5It ships in Divi Torque Lite on WordPress.org and in Divi Torque Pro.

Everything the Divi Skill Bar module does

Every option below ships in the free plugin, and in Divi Torque Pro.

One item per bar, each with its own name and levelLevel as a percentage, typed per itemText placement: inside the bar or above itShow or hide the nameShow or hide the level numberBar height and corner radius, per itemBar colour and track colour, per itemOptional panel titleSpacing between bars

See the Divi Skill Bar in action

Every set of bars below is the live module, not a static graphic. This one places the label inside the fill.

Label inside

Four bars, name and percentage inside the fill.

What we spend our time on

Building modules

90%

Answering support

75%

Writing docs

60%

Marketing

30%

Label above the bar

Text Placement set to Out moves the name and level above the fill instead of inside it, which suits a thinner bar.

Thin bars, label above

A 10px bar height with the text placed outside.

HTML & CSS

95%

WordPress

92%

Divi Builder

98%

Adding one takes about a minute

Three steps, and none of them involve custom CSS.

1Drop in the moduleAdd Skill Bar to any row. It arrives with two placeholder bars already in place.2Add the barsEach bar is a child item, added the same way as any other Divi container module.3Set the level and the coloursLevel, bar colour and track colour are all set per item in the Content and Design panels.

Questions people ask first

Short answers, all of them checked against what the module actually does.

Is the Skill Bar module free?Yes. It ships in Divi Torque Lite on WordPress.org, and in Divi Torque Pro.Does it need Divi 5?It is a native Divi 5 module. A Divi 4 layout using the same module converts across, since it shares the same shortcode.Does the bar fill in with animation on scroll?No. It renders at its set width. There is no count-up or fill-in-on-scroll animation.Can the level pull from real data?No. Level is typed text per item, not connected to a live data source.Can I hide the percentage but keep the label?Yes. Show Name and Hide Level are independent toggles, so either can be shown alone.Can each bar have a different height?Yes. Bar height, radius, colour and track colour are all set per item, not shared across the whole set.