loader image

Progress Bars & Pie Charts

[vc_row column_spacing= »0px »][vc_column][vcex_heading text= »Skill Bars » style= »bottom-border-w-color » font_weight= »semibold » font_size= »16px » css= ».vc_custom_1477247098449{margin-bottom: 20px !important;} »][/vc_column][/vc_row][vc_row][vc_column width= »1/2″][vcex_skillbar percentage= »60″ color= »#64bd8c »][vcex_skillbar title= »HTML/CSS » percentage= »76″ color= »#37bfef »][vcex_skillbar title= »Development » percentage= »95″ color= »#fe584d »][/vc_column][vc_column width= »1/2″][vcex_skillbar css_animation= »top-to-bottom » percentage= »45″ show_percent= »false » color= »#bf7aa3″][vcex_skillbar css_animation= »top-to-bottom » title= »HTML/CSS » percentage= »65″ show_percent= »false » color= »#c37070″][vcex_skillbar css_animation= »top-to-bottom » title= »Development » percentage= »85″ show_percent= »false » color= »#b7d967″][/vc_column][/vc_row][vc_row column_spacing= »0px » bg_style= »stretch »][vc_column][vcex_heading text= »Progress Bars » style= »bottom-border-w-color » font_weight= »semibold » font_size= »16px » css= ».vc_custom_1443576202070{margin-bottom: 20px !important;} »][/vc_column][/vc_row][vc_row][vc_column 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][vc_column 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 »][/vc_column][/vc_row][vc_row column_spacing= »0px » bg_style= »stretch »][vc_column][vcex_heading text= »Pie Charts » style= »bottom-border-w-color » font_weight= »semibold » font_size= »16px » css= ».vc_custom_1443576222194{margin-bottom: 20px !important;} »][/vc_column][/vc_row][vc_row][vc_column width= »1/4″][vc_pie value= »95″ color= »custom » title= »Design Skill » units= »% » custom_color= »#ff9900″ css= ».vc_custom_1477247780070{padding-right: 20px !important;padding-left: 20px !important;} »][/vc_column][vc_column width= »1/4″][vc_pie value= »73″ color= »custom » title= »Project Completion » units= »% » custom_color= »#6ab165″ css= ».vc_custom_1477247788663{padding-right: 20px !important;padding-left: 20px !important;} »][/vc_column][vc_column width= »1/4″][vc_pie value= »88″ color= »custom » title= »Coding Mastery » units= »% » custom_color= »#ff675b » css= ».vc_custom_1477247794985{padding-right: 20px !important;padding-left: 20px !important;} »][/vc_column][vc_column width= »1/4″][vc_pie value= »90″ color= »custom » title= »PSD Ninja » units= »% » custom_color= »#0088cc » css= ».vc_custom_1477247800105{padding-right: 20px !important;padding-left: 20px !important;} »][/vc_column][/vc_row][vc_row column_spacing= »0px » bg_style= »stretch »][vc_column][vcex_heading text= »Round & Line Charts » style= »bottom-border-w-color » font_weight= »semibold » font_size= »16px » css= ».vc_custom_1477247754727{margin-bottom: 20px !important;} »][/vc_column][/vc_row][vc_row][vc_column width= »1/4″][vc_round_chart][/vc_column][vc_column width= »1/4″][vc_round_chart type= »doughnut » stroke_width= »2″ values= »%5B%7B%22title%22%3A%22One%22%2C%22value%22%3A%2250%22%2C%22color%22%3A%22turquoise%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22value%22%3A%2235%22%2C%22color%22%3A%22vista-blue%22%7D%2C%7B%22title%22%3A%22Three%22%2C%22value%22%3A%2215%22%2C%22color%22%3A%22sky%22%7D%5D »][/vc_column][vc_column width= »1/4″][vc_line_chart x_values= »JAN; FEB; MAR; APR; MAY; JUN; » values= »%5B%7B%22title%22%3A%22One%22%2C%22y_values%22%3A%2210%3B%2015%3B%2020%3B%2025%3B%2027%3B%2025%22%2C%22color%22%3A%22sandy-brown%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22y_values%22%3A%2225%3B%2018%3B%2016%3B%2017%3B%2020%3B%2025%22%2C%22color%22%3A%22orange%22%7D%5D »][/vc_column][vc_column width= »1/4″][vc_line_chart type= »line » x_values= »JAN; FEB; MAR; APR; MAY; JUN » values= »%5B%7B%22title%22%3A%22One%22%2C%22y_values%22%3A%2210%3B%2015%3B%2020%3B%2025%3B%2027%3B%2025%22%2C%22color%22%3A%22purple%22%7D%2C%7B%22title%22%3A%22Two%22%2C%22y_values%22%3A%2225%3B%2018%3B%2016%3B%2017%3B%2020%3B%2025%22%2C%22color%22%3A%22violet%22%7D%5D »][/vc_column][/vc_row][vc_row][vc_column][vcex_divider 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]