Home / Shortcodes / Progress bars and Skill meter

Progress bars and Skill meter

[vc_row][vc_column width=”3/4″ el_position=”first”][mk_fancy_title tag_name=”h1″ style=”false” color=”#333333″ size=”32″ font_weight=”300″ margin_top=”0″ margin_bottom=”20″ font_family=”none” align=”left” width=”1/1″ el_position=”first last”]

Progress bars. Beautiful & customizable.

[/mk_fancy_title][mk_custom_list style=”e26a” icon_color=”#00c8d7″ margin_bottom=”30″ width=”1/1″ el_position=”first last” align=”none”]
  • All progress bars are customizable. Change color, thickness and size of each bar .
  • 3 type of bars. With percentage, with custom text and with icon inside.
  • Animated contents are available.
[/mk_custom_list][mk_padding_divider size=”30″ width=”1/1″ el_position=”first last”][vc_row_inner][vc_column_inner width=”1/3″ el_position=”first”][mk_chart percent=”83″ bar_color=”#00c8d7″ track_color=”#e0e0e0″ line_width=”6″ bar_size=”220″ content_type=”icon” icon=”icon-female” desc=”Chart with icon” width=”1/1″ el_position=”first last”][/vc_column_inner][vc_column_inner width=”1/3″][mk_chart percent=”73″ bar_color=”#00c8d7″ track_color=”#e0e0e0″ line_width=”6″ bar_size=”220″ content_type=”percent” icon=”icon-female” desc=”Chart with percentage” width=”1/1″][/vc_column_inner][vc_column_inner width=”1/3″ el_position=”last”][mk_chart percent=”43″ bar_color=”#00c8d7″ track_color=”#e0e0e0″ line_width=”6″ bar_size=”220″ content_type=”custom_text” custom_text=”Custom Text” desc=”Chart with custom text” width=”1/1″ el_position=”first last”][/vc_column_inner][/vc_row_inner][mk_divider style=”single_dotted” divider_width=”full_width” margin_top=”50″ margin_bottom=”50″ width=”1/1″ el_position=”first last”][vc_row_inner][vc_column_inner width=”1/2″ el_position=”first”][vc_column_text title=”Any size. Any thickness. Any color.” disable_pattern=”false” align=”left” margin_bottom=”10″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Praesent mi risus, fringilla et congue a, adipiscing a justo. Etiam non nulla libero. Proin vitae feugiat ante. In semper dignissim rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vitae nulla in dui ullamcorper molestie ac at eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nulla non semper enim, et ultrices dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et lacus sit amet ante ornare adipiscing sed in ligula. Donec scelerisque quis risus in suscipit. Nam quis mi in lorem egestas ultricies. Aenean aliquam quam ut ante feugiat pulvinar.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″ el_position=”last”][mk_chart percent=”79″ bar_color=”#f56a5f” track_color=”#e0e0e0″ line_width=”18″ bar_size=”300″ content_type=”icon” icon=”icon-hdd” width=”1/1″ el_position=”first last”][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/4″][mk_custom_sidebar sidebar=”Shortcodes” width=”1/1″ el_position=”last”][/vc_column][/vc_row][vc_row fullwidth=”true”][vc_column width=”1/1″][mk_divider style=”single_dotted” divider_width=”full_width” margin_top=”0″ margin_bottom=”20″ width=”1/1″ el_position=”first last”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″ el_position=”first”][mk_fancy_title tag_name=”h1″ style=”false” color=”#333333″ size=”32″ font_weight=”300″ margin_top=”0″ margin_bottom=”20″ font_family=”none” align=”left” width=”1/1″ el_position=”first last”]

Diagram progress bar

[/mk_fancy_title][vc_column_text disable_pattern=”false” align=”left” margin_bottom=”83″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

Praesent mi risus, fringilla et congue a, adipiscing a justo. Etiam non nulla libero. Proin vitae feugiat ante. In semper dignissim rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vitae nulla in dui ullamcorper molestie ac at eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nulla non semper enim, et ultrices dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et lacus sit amet ante ornare adipiscing sed in ligula. Donec scelerisque quis risus in suscipit. Nam quis mi in lorem egestas ultricies. Aenean aliquam quam ut ante feugiat pulvinar.

Ut vitae nulla in dui ullamcorper molestie ac at eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nulla non semper enim, et ultrices dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et lacus sit amet ante ornare adipiscing sed in ligula. Donec scelerisque quis risus in suscipit. Nam quis mi in lorem egestas ultricies. Aenean aliquam quam ut ante feugiat pulvinar.

 

[/vc_column_text][/vc_column][vc_column width=”1/2″ el_position=”last”][mk_skill_meter_chart title=”Skills” percent_1=”90″ color_1=”#0b486b” name_1=”Photoshop” percent_2=”85″ color_2=”#3b8686″ name_2=”CSS” percent_3=”76″ color_3=”#79bd9a” name_3=”PHP” percent_4=”45″ color_4=”#a8dba8″ name_4=”Copywriting” percent_5=”38″ color_5=”#cff09e” name_5=”Marketing” percent_6=”0″ color_6=”#82bf56″ percent_7=”0″ color_7=”#4ecdc4″ default_text=”Skill” center_color=”#1e3641″ default_text_color=”#ffffff” animation=”bottom-to-top” width=”1/1″ el_position=”first last”][/vc_column][/vc_row][vc_row fullwidth=”true”][vc_column width=”1/1″][mk_divider style=”single_dotted” divider_width=”full_width” margin_top=”0″ margin_bottom=”20″ width=”1/1″ el_position=”first last”][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][mk_fancy_title tag_name=”h1″ style=”false” color=”#333333″ size=”32″ font_weight=”300″ margin_top=”0″ margin_bottom=”20″ font_family=”none” align=”left” width=”1/1″ el_position=”first last”]

Skill meters. As many as you want.

[/mk_fancy_title][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vc_column_text disable_pattern=”false” align=”left” margin_bottom=”83″ p_margin_bottom=”0″ width=”1/1″ el_position=”first last”]

This useful shortcode allows you to create unlimited amount of skill meters with your desired color and alt texts. You can also use this shortcode to show some progresses.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][mk_skill_meter title=”Photoshop” percent=”90″ color=”#00c8d7″ width=”1/1″ el_position=”first last”][mk_skill_meter title=”Illustrator” percent=”80″ color=”#00c8d7″ width=”1/1″ el_position=”first last”][mk_skill_meter title=”Javascript” percent=”62″ color=”#00c8d7″ width=”1/1″ el_position=”first last”][mk_skill_meter title=”HTML” percent=”85″ color=”#00c8d7″ width=”1/1″ el_position=”first last”][mk_skill_meter title=”After effect” percent=”50″ color=”#00c8d7″ width=”1/1″ el_position=”first last”][mk_skill_meter title=”Copywighting” percent=”25″ color=”#00c8d7″ width=”1/1″ el_position=”first last”][mk_fancy_title tag_name=”h1″ style=”false” color=”#00c8d7″ size=”14″ font_weight=”bold” margin_top=”50″ margin_bottom=”55″ font_family=”none” align=”left” width=”1/1″ el_position=”first last”]

With different colors

[/mk_fancy_title][mk_skill_meter title=”Maecenas pretium” percent=”90″ color=”#e08b5a” width=”1/1″ el_position=”first last”][mk_skill_meter title=”Class aptent taciti” percent=”80″ color=”#5ca8e6″ width=”1/1″ el_position=”first last”][mk_skill_meter title=”Vivamus vehicula” percent=”62″ color=”#f05b65″ width=”1/1″ el_position=”first last”][mk_skill_meter title=”Curabitur” percent=”85″ color=”#d1c73e” width=”1/1″ el_position=”first last”][mk_skill_meter title=”Duis vestibulum” percent=”50″ color=”#b168c7″ width=”1/1″ el_position=”first last”][mk_skill_meter title=”Proin fermentum” percent=”25″ color=”#34b097″ width=”1/1″ el_position=”first last”][mk_padding_divider size=”40″ width=”1/1″ el_position=”first last”][/vc_column][/vc_row][mk_page_section border_color=”#00c8d7″ bg_color=”#00c8d7″ attachment=”scroll” bg_position=”left top” bg_stretch=”false” enable_3d=”false” speed_factor=”0″ section_layout=”full” sidebar=”Shortcodes” min_height=”100″ padding_top=”50″ padding_bottom=”50″ margin_bottom=”0″ last_page=”true” width=”1/1″ el_position=”first last” bg_repeat=”repeat” bg_video=”no” video_mask=”false” top_shadow=”false” first_page=”false”][vc_column width=”1/3″][mk_icon_box title=”Multiple styles” text_size=”16″ font_weight=”inhert” icon=”moon-pie” style=”simple_ultimate” icon_size=”medium” icon_location=”left” circled=”false” icon_color=”#46525e” icon_circle_color=”#0bb697″ box_blur=”false” title_color=”#ffffff” txt_color=”#404b57″ margin=”0″ width=”1/1″ el_position=”first”]

You have 3 styles to display any progress stats on your website. Pie charts, Legend charts and skill meters.

[/mk_icon_box][/vc_column][vc_column width=”1/3″][mk_icon_box title=”Alternative texts” text_size=”16″ font_weight=”inhert” icon=”moon-bubble-12″ style=”simple_ultimate” icon_size=”medium” icon_location=”left” circled=”false” icon_color=”#46525e” icon_circle_color=”#0bb697″ box_blur=”false” title_color=”#ffffff” txt_color=”#404b57″ margin=”0″ width=”1/1″]

In addition to multiple bars to show any progress you have another option to describe it with words.

[/mk_icon_box][/vc_column][vc_column width=”1/3″][mk_icon_box title=”Customizability and colors” text_size=”16″ font_weight=”inhert” icon=”moon-paint-format-2″ style=”simple_ultimate” icon_size=”medium” icon_location=”left” circled=”false” icon_color=”#46525e” icon_circle_color=”#0bb697″ box_blur=”false” title_color=”#ffffff” txt_color=”#404b57″ margin=”0″ width=”1/1″ el_position=”last”]

There is no limit! You can apply any style and coloring to charts to fit your design.

[/mk_icon_box][/vc_column][/mk_page_section]