Progress Bars

This element helps you to insert progress bars and progress diagrams in your page.

Check this demo pages showing different progress bar styles:

https://codex-themes.com/thegem/elements/diagram/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Progress Bars” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Layout: here you can select a layout for progress bars. You can choose between linear and circular layout

Style: for linear progress bars you can choose between two different design presets

Items

This section contains a repeater, where you can add any number of progress bar items you need. In each item you can specify:

• Skill text
• Progress level in percent

In case you wish to customize this bar item individually, activate “Want to customize?” switch to get additional options:

• Level Color
• Base Color
• Name Color
• Percentage Color

Options

In this section you can specify whether you wish to show percentage and enable lazy loading animation for progress bars

Style Tab

Bars Style

In this section you can customize the look of progress bars. Note: the color settings here are applied only to the items, which have not been individually customized in Content tab -> Items section.

Name Style

Specify the typography, colors and spacings of the skill names

Percentage Style

Specify the typography, colors and spacings of the skill names