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]