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