Progress Bars

The Progress Bars module shows a list of horizontal bars with a percentage fill. Its one job is to display skills, levels or completion values as bars.

How to add it

1. Open the page in the Divi 5 Visual Builder.
2. Add a module to a row and search for Progress Bars.
3. Add bars with the module's item control. Each bar is a Skill Bar Item.
4. Set the name and level on each item.

Content tab: Progress Bars (parent)

Content

• Title: optional heading shown above the bars.

Content tab: Skill Bar Item (each bar)

Content

• Use Name: on by default.
• Name: the label for the bar.
• Level: fill percentage, 0 to 100. Default 30%.
• Hide Level Text: off by default.
• Text Placement: Inside (default) or Outside.

Design tab: Progress Bars (parent)

• Title Text: font settings and Spacing Bottom (default 10px).
• Name Text: font settings and Name Spacing (default 15px).
• Level Text: font settings and Level Spacing (default 15px).
• Bar: Bar Spacing Bottom (default 20px).

Design tab: Skill Bar Item

• Bar Style: Level Background (default #0e40ff), Bar Background (default #b2bad1), Bar Height (default 30px), Bar Border Radius (default 40px), Outer Text Spacing (default 12px), and a Bar box shadow.
• Name Text: font settings and Name Spacing.
• Level Text: font settings and Level Spacing.

FAQ

Does it work in Divi 4?

Yes. A Divi 4 version exists (shortcodes torq_progress_bar and torq_progress_bar_child). This page describes the Divi 5 settings.

Can I put the percentage outside the bar?

Yes. Set Text Placement on the item to Outside, then adjust Outer Text Spacing under Design > Bar Style.

Can I hide the percentage number?

Yes. Turn on Hide Level Text on the item. Turn off Use Name to hide the name.

Why does the parent have Name and Level spacing too?

The parent and each item both expose Name Spacing and Level Spacing. The item values default to empty, and the parent values default to 15px.