Skill Bars

Overview

The Skill Bars module displays a collection of animated skill progress bars on your page. It supports four layout styles — horizontal bars, vertical bars, circular progress rings, and half-circle gauges — making it ideal for resumes, team pages, portfolios, or any page where you want to visually showcase skills or proficiency levels. Each skill is added as a child item with its own title, percentage, icon, and optional color override. The bars animate smoothly when they scroll into view, with configurable speed and easing.

Content Settings

Layout Settings

Layout Type  (Dropdown)

Choose the visual style for displaying skill progress.

• Available options: Horizontal Bar, Vertical Bar, Circular Progress, Half-Circle Gauge
• Default: Horizontal Bar

Show Percentage  (Toggle)

Display the numeric percentage value on each skill bar.

• Default: On

Percentage Position  (Dropdown)

Where to display the percentage number relative to the bar.

• Available options: Inside Bar, Right of Bar, Above Bar (right-aligned), Tooltip on Hover
• Default: Inside Bar
• Only appears when Show Percentage is on and Layout Type is Horizontal Bar or Vertical Bar

Show Title  (Toggle)

Display the skill label text above or beside each bar.

• Default: On

Title Position  (Dropdown)

Where to place the skill title relative to the bar. Some options (Inside Bar, Left of Bar) are only available for Horizontal Bar layout.

• Available options: Above Bar, Inside Bar, Below Bar, Left of Bar
• Default: Above Bar
• Only appears when Show Title is on and Layout Type is Horizontal Bar or Vertical Bar

Show Icons  (Toggle)

Display an icon next to the skill title for each bar item.

• Default: On

Custom Suffix  (Text Field)

Replace the default “%” symbol with custom text shown after the percentage value (e.g., /100, pts).

• Default: %

Animation Settings

Enable Fill Animation  (Toggle)

Animate the bar fill and percentage count-up when the module scrolls into view.

• Default: On

Animation Duration (ms)  (Slider)

How long each bar’s fill animation takes to complete, in milliseconds.

• Range: 200 to 3000 milliseconds
• Default: 1500ms
• Only appears when Enable Fill Animation is on

Stagger Delay (ms)  (Slider)

The delay between each bar’s animation start, creating a cascading effect.

• Range: 0 to 400 milliseconds
• Default: 120ms
• Only appears when Enable Fill Animation is on

Easing Curve  (Dropdown)

The acceleration style of the fill animation.

• Available options: Ease-Out, Ease-In-Out, Linear, Bounce
• Default: Ease-Out
• Only appears when Enable Fill Animation is on

Replay on Scroll  (Toggle)

Re-trigger the fill animation each time the bars scroll back into the viewport.

• Default: Off
• Only appears when Enable Fill Animation is on

Background

Standard Divi background options for the module wrapper, including solid color, gradient, image, and video backgrounds.

Skill Bar Item — Child Settings

Each skill in the gallery is added as a Skill Bar Item child. Click ‘Add New Skill’ to add items and configure each one individually using the settings below.

Skill Item

Skill Title  (Text Field)

The label shown for this skill (e.g., Photoshop, Leadership, HTML).

• Default: Skill

Percentage  (Slider)

The proficiency level for this skill, shown as a percentage from 0 to 100.

• Range: 0 to 100
• Default: 75

Bar Color  (Color Picker)

Override the parent gallery’s fill color for just this skill item. Leave empty to use the parent color.

Icon  (Icon Picker)

Select an icon to display alongside the skill title for this item.

Design Settings

Bar Styling

Fill Style  (Dropdown)

The visual style of the filled portion of each bar.

• Available options: Solid, Gradient, Striped, Animated Stripes, Glassmorphism
• Default: Solid
• Only appears when Layout Type is Horizontal Bar or Vertical Bar

Bar Fill Color  (Color Picker)

The color of the filled portion of the bar. When Fill Style is Gradient, this is the gradient start color.

• Default: #2ea3f2
• Only appears when Layout Type is Horizontal Bar or Vertical Bar

Gradient End Color  (Color Picker)

The second color for the gradient fill, blending from the start color to this color.

• Default: #00b4d8
• Only appears when Fill Style is Gradient

Stripe Speed (s)  (Slider)

The speed of the stripe animation for animated striped bars.

• Range: 0.3 to 5 seconds
• Default: 1s
• Only appears when Fill Style is Striped or Animated Stripes

Track / Background Color  (Color Picker)

The color of the unfilled track behind each bar.

• Default: #e8e8e8
• Only appears when Layout Type is Horizontal Bar or Vertical Bar

Bar Height  (Slider)

The thickness of each horizontal bar.

• Range: 6 to 50 pixels
• Default: 20px
• Only appears when Layout Type is Horizontal Bar

Bar Width  (Slider)

The width of each vertical bar column.

• Range: 5 to 800 pixels
• Default: 60px
• Only appears when Layout Type is Vertical Bar

Bar Spacing  (Slider)

The gap between each skill bar in the list.

• Range: 4 to 40 pixels
• Default: 16px
• Only appears when Layout Type is Horizontal Bar or Vertical Bar

Bar Border Radius  (Slider)

How rounded the ends of each bar are.

• Range: 0 to 25 pixels
• Default: 4px
• Only appears when Layout Type is Horizontal Bar or Vertical Bar

Hover Scale Effect  (Toggle)

Slightly enlarges the bar when a visitor hovers over it.

• Default: Off
• Only appears when Layout Type is Horizontal Bar or Vertical Bar

Bar Track Border & Shadow

Border and Box Shadow options applied to the bar track (the background track of each skill bar).

Circle & Gauge Styling

Circle Size (px)  (Slider)

The overall diameter of each circular progress ring or gauge.

• Range: 60 to 180 pixels
• Default: 120px
• Only appears when Layout Type is Circular Progress or Half-Circle Gauge

Stroke Width (px)  (Slider)

The thickness of the circular progress ring.

• Range: 4 to 24 pixels
• Default: 10px
• Only appears when Layout Type is Circular Progress or Half-Circle Gauge

Stroke Cap  (Dropdown)

The shape of the ends of the circular progress arc.

• Available options: Round, Square
• Default: Round
• Only appears when Layout Type is Circular Progress or Half-Circle Gauge

Track Stroke Color  (Color Picker)

The color of the unfilled background ring behind each circular progress bar.

• Default: #e8e8e8
• Only appears when Layout Type is Circular Progress or Half-Circle Gauge

Center Content  (Dropdown)

What to display in the center of each circular progress ring.

• Available options: Percentage
• Default: Percentage
• Only appears when Layout Type is Circular Progress or Half-Circle Gauge

Rotation Start  (Slider)

The angle at which the progress arc begins. -90° starts at the top, 0° starts at the right.

• Range: -180 to 180 degrees
• Default: -90 (top)
• Only appears when Layout Type is Circular Progress or Half-Circle Gauge

Title Typography

Typography settings for the skill title text, including font family, size, weight, color, and letter spacing. Also includes spacing controls for padding and margin around the title.

Percentage Typography

Percentage Pill Background  (Toggle)

Wrap the percentage number in a colored pill/badge background.

• Default: Off

Pill Background Color  (Color Picker)

The background color of the percentage pill badge.

• Only appears when Percentage Pill Background is on

Icon Styling

Icon Size  (Slider)

The size of the icons displayed alongside skill titles.

• Range: 12 to 48 pixels
• Default: 20px

Icon Color  (Color Picker)

The color of the icons displayed alongside skill titles.

Icon Position  (Dropdown)

Whether the icon appears before or after the skill title text.

• Available options: Before Title, After Title
• Default: Before Title

Icon Spacing  (Slider)

The gap between the icon and the skill title text.

• Range: 0 to 16 pixels
• Default: 8px

Skill Bar Item — Child Design

Each Skill Bar Item child has its own design settings: Title (font family, size, weight, color), Percentage (font family, size, weight, color), and Icon (size and color override for the individual item).

Module Styling

Standard Divi design options for the overall module: Sizing, Spacing, Border, Box Shadow, Filters, and Transform.

 

Advanced Settings

• CSS ID & Classes — Add a custom CSS ID or class to the module.
• Custom CSS — Write custom CSS targeting specific parts of the module: skill bar item, skill bar track, skill bar fill, skill bar title, skill bar percentage, and skill circle.
• Visibility — Show or hide this module on desktop, tablet, or phone.
• Overflow — Control whether content extending beyond the module boundary is visible or clipped.
• Transition — Customize hover transition duration and style.
• Position — Control the module’s positioning (static, relative, absolute, or fixed).
• Z-Index — Set the stacking order of the module relative to other page elements.
• Scroll Effects — Add Divi’s built-in scroll-triggered motion effects.
• Animation — Add entrance animation effects to the module.

Tips & Best Practices

• Use the Circular Progress or Half-Circle Gauge layout for a modern, dashboard-style skills section — it works especially well on agency and portfolio sites where you want to show proficiency at a glance.
• Enable the Stagger Delay in Animation Settings so each bar animates in sequence rather than all at once. A delay of 80–150ms creates a smooth cascading effect without feeling slow.
• Use Bar Color on individual Skill Bar Items to give each skill a unique accent color, overriding the parent fill — great for color-coding skill categories (e.g., blue for design, green for development).
• Set Custom Suffix to ‘/10’ or ‘pts’ if you want to display scores rather than percentages, while still using the slider to control the bar fill level.