Circle Charts & Skill Bars

[title type="special-h4-left"]Circle Charts[/title]
[row]

[column size="col-4"]

[circle_chart type="with-icon" color="#c0392b" track_color="#e1e1e1" weight="3" icon="hb-moon-meter-fast" percent="60" caption="60% Faster" animation_speed="300" animation="top-to-bottom"]

[/column]

[column size="col-4"]

[circle_chart type="with-icon" color="#2c3e50" track_color="#e1e1e1" weight="3" icon="hb-moon-cogs" percent="80" caption="80% More Powerful" animation_speed="600" animation="top-to-bottom"]

[/column]

[column size="col-4"]

[circle_chart type="with-icon" weight="3" icon="hb-moon-quill-2" percent="90" caption="90% Lighter" animation_speed="1200" animation="top-to-bottom"]

[/column]

[/row]

[spacer]

[row]

[column size="col-4"]

[circle_chart type="with-percent" percent="80" color="#2c3e50" track_color="#e1e1e1" weight="8" icon="hb-moon-cogs" percent="80" caption="With Percents" animation_speed="600" animation="top-to-bottom"]

[/column]

[column size="col-4"]

[circle_chart type="with-text" text="Text?" color="#8e44ad" track_color="#e1e1e1" weight="3"  percent="50" caption="Yes! Use Text" animation_speed="900" animation="top-to-bottom"]

[/column]

[column size="col-4"]

[circle_chart type="with-icon" color="#8e44ad" track_color="#e1e1e1" weight="1" icon="hb-moon-health" percent="75" caption="Line Weight" animation_speed="900" animation="top-to-bottom"]

[/column]

[/row]

[spacer height="50px"]
[title type="special-h4-left"]Skill Bars[/title]
[spacer height="30px"]

[row]
[column size="col-6"]
[skill number="90" char="%" caption="WordPress"]
[skill number="80" char="%" caption="PHP"]
[skill number="70" char="%" caption="Java"]
[skill number="60" char="%" caption="Ruby"]
[skill number="50" char="%" caption="Python"]
[/column]
[column size="col-6"]
[skill number="75" char="%" caption="WordPress" color="#2980b9"]
[skill number="53" char="%" caption="PHP" color="#c0392b"]
[skill number="66" char="%" caption="Java" color="#d35400"]
[skill number="95" char="%" caption="Ruby" color="#8e44ad"]
[skill number="40" char="%" caption="Python" color="#27ae60"]
[/column]
[/row]

[spacer height="50px"]

[title type="special-h4-left"]Get the code[/title]
[title type="subtitle-h6"]Paste in Text Editor[/title]

[content_box type="without-header" color="#FFFFFF" class="pre-text"]

[circle_chart type="with-icon" color="#c0392b" track_color="#e1e1e1" weight="3" icon="hb-moon-meter-fast" percent="60" caption="60% Faster" animation_speed="300" animation="top-to-bottom"]

[skill number="75" char="%" caption="WordPress" color="#2980b9"]

[/content_box]

[info_message style="info"]1. You can also use these shortcodes as Visual Composer Drag & Drop elements.
If you prefer shortcodes, you can generate them using Shortcode Generator.

 

2. Visit Theme Documentation for available arguments and more information. View Documentation Now.
[/info_message]