Progress Bars & Pie Charts

Home / Visual Composer / Progress Bars & Pie Charts

[vc_row][vc_column width=”1/1″][vc_text_separator title=”Skill Bars” title_align=”separator_align_left” style=”two” element_type=”div”][vc_row_inner][vc_column_inner width=”1/2″][vcex_skillbar title=”Web Design” percentage=”60″ color=”#64bd8c” show_percent=”true”][vcex_skillbar title=”HTML/CSS” percentage=”76″ color=”#37bfef” show_percent=”true”][vcex_skillbar title=”Development” percentage=”95″ color=”#fe584d” show_percent=”true”][/vc_column_inner][vc_column_inner width=”1/2″][vcex_skillbar title=”Web Design” css_animation=”top-to-bottom” percentage=”45″ color=”#bf7aa3″ show_percent=”false”][vcex_skillbar title=”HTML/CSS” css_animation=”top-to-bottom” percentage=”65″ color=”#c37070″ show_percent=”false”][vcex_skillbar title=”Development” css_animation=”top-to-bottom” percentage=”85″ color=”#b7d967″ show_percent=”false”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row bg_style=”stretch” border_style=”solid” margin_bottom=”10px”][vc_column width=”1/1″][vc_text_separator title=”Progress Bars” title_align=”separator_align_left” style=”two” element_type=”div”][vc_row_inner][vc_column_inner width=”1/2″][vc_progress_bar values=”50|Development” bgcolor=”bar_blue” options=”striped,animated”][vcex_spacing size=”5px”][vc_progress_bar values=”70|Development” bgcolor=”bar_green” options=”striped,animated”][vcex_spacing size=”5px”][vc_progress_bar values=”90|Development” bgcolor=”bar_red” options=”striped,animated”][/vc_column_inner][vc_column_inner width=”1/2″][vc_progress_bar values=”30|Development” bgcolor=”bar_orange” options=”striped,animated”][vcex_spacing size=”5px”][vc_progress_bar values=”50|Development” bgcolor=”bar_turquoise” options=”striped,animated”][vcex_spacing size=”5px”][vc_progress_bar values=”80|Development” bgcolor=”bar_black” options=”striped,animated” custombgcolor=”#1e73be”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row bg_style=”stretch” border_style=”solid”][vc_column width=”1/1″][vc_text_separator title=”Pie Charts” title_align=”separator_align_left” style=”two” element_type=”div”][vcex_spacing size=”30px”][vc_row_inner][vc_column_inner width=”1/4″][vc_pie value=”95″ color=”btn-warning” title=”Design Skill” units=”%”][/vc_column_inner][vc_column_inner width=”1/4″][vc_pie value=”73″ color=”btn-success” title=”Project Completion” units=”%”][/vc_column_inner][vc_column_inner width=”1/4″][vc_pie value=”88″ color=”btn-danger” title=”Coding Mastery” units=”%”][/vc_column_inner][vc_column_inner width=”1/4″][vc_pie value=”90″ color=”btn-primary” title=”PSD Ninja” units=”%”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][vcex_divider style=”solid” icon_color=”#000000″ icon_size=”14px” margin_top=”0px” margin_bottom=”40px” width=”100%” height=”1px”][vc_column_text]

Regarding Progress Bars & Pie Charts

  • You can have Unlimited progress, skill bars and charts on a page
  • Choose between the Total skillbar or the composer progress bar
  • Choose your custom background color for skill and progress bars
  • Choose your custom border color for the pie charts

[/vc_column_text][/vc_column][/vc_row]