Circle Counter

[TS-VCSC-Icon-Title title=”Circle Counter Features” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RmVhdHVyZXM=” el_file1=”” el_file2=””]

The original Visual Composer plugin already provides for a circle counter but that element is rather limited in its options and is not able to handle icon fonts. Therefore, Visual Composer Extensions is providing you with an extended version that can do all that, and more.

[TS_VCSC_Fancy_List list_type=”image” marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png”]

  • Define color for animated bar and bar background
  • Add color to inside of circle
  • Change width of animated bar
  • Show counter as full or half circle
  • Show icon or image on left or right position inside circle
  • Change icon color
  • Counter can be made responsive (with defined min/max size) or shown in fixed dimensions
  • … and more!

[/TS_VCSC_Fancy_List]

[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Circle Counter with Font Icons” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”Rm9udCUyQyUyMEljb25z” el_file1=”” el_file2=””]
[TS-VCSC-Circliful circle_percent=”85″ circle_value_text=”85″ circle_value_post=”%” circle_value_info=”Speed Improvement” circle_icon=”ts-awesome-cogs”]
[TS-VCSC-Circliful color_foreground=”#dd3333″ circle_thickness=”10″ circle_half=”true” circle_percent=”53″ circle_value_text=”53″ circle_value_post=”%” circle_value_info=”Customer Increase” circle_icon=”ts-awesome-group” circle_icon_color=”#dd9933″]
[TS-VCSC-Circliful color_foreground=”#81d742″ color_background=”#e8e8e8″ circle_fill=”true” circle_inside=”#fcfcfc” circle_thickness=”10″ circle_percent=”99″ circle_value_text=”99″ circle_value_post=”%” circle_value_info=”Bugs Free” circle_icon=”ts-awesome-bug” circle_icon_color=”#248715″ circle_icon_position=”right”]
[TS-VCSC-Circliful color_foreground=”#eded00″ circle_thickness=”10″ circle_half=”true” circle_percent=”60″ circle_value_text=”240″ circle_value_post=”GB” circle_value_info=”240GB of 400GB used” circle_icon=”ts-awesome-stack-overflow” circle_icon_color=”#dd3333″]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Circle Counter with Images” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”SW1hZ2Vz” el_file1=”” el_file2=””]
[TS-VCSC-Circliful circle_percent=”85″ circle_value_text=”85″ circle_value_post=”%” circle_value_info=”Speed Improvement” circle_icon_replace=”true” circle_image=”16319″]
[TS-VCSC-Circliful color_foreground=”#dd3333″ circle_thickness=”10″ circle_half=”true” circle_percent=”53″ circle_value_text=”53″ circle_value_post=”%” circle_value_info=”Customer Increase” circle_icon_replace=”true” circle_image=”16291″]
[TS-VCSC-Circliful color_foreground=”#81d742″ color_background=”#e8e8e8″ circle_fill=”true” circle_inside=”#fcfcfc” circle_thickness=”10″ circle_percent=”99″ circle_value_text=”99″ circle_value_post=”%” circle_value_info=”Bugs Free” circle_icon_replace=”true” circle_image=”16251″ circle_icon_position=”right”]
[TS-VCSC-Circliful color_foreground=”#eded00″ circle_thickness=”10″ circle_half=”true” circle_percent=”60″ circle_value_text=”240″ circle_value_post=”GB” circle_value_info=”240GB of 400GB used” circle_icon_replace=”true” circle_image=”16296″]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Circle Counter with Dynamic Values” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RHluYW1pYyUyQyUyMFZhbHVlcw==” el_file1=”” el_file2=””][TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle”]

Version 2.6.0 of Visual Composer introduced the option to define the animated values for the circle and the label inside the circle by using an external shortcode, provided of course, that the utilized shortcode creates a valid integer (numeric) value.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″]

[TS-VCSC-Circliful circle_percent_by_shortcode=”true” circle_percent_shortcode=”JTVCVFNfVkNTQ19HZXRSYW5kb21QZXJjZW50JTVE” circle_value_text_by_shortcode=”true” circle_value_text_shortcode=”JTVCVFNfVkNTQ19HZXRSYW5kb21QZXJjZW50JTVE” circle_value_post=”%” circle_value_info=”Completion” circle_icon_replace=”true” circle_image=”16309″]

This counter uses a simple shortcode that randomly creates a number between 1 and 100, to be used as the percent value for the circle and for the label inside the label.

[TS_EnlighterJS_Snippet_Single code_type=”php” code_content=”ZnVuY3Rpb24lMjBUU19WQ1NDX0dldFJhbmRvbVBlcmNlbnQlMjglMjRhdHRzJTI5JTdCJTBBJTIwJTIwJTIwJTIwb2Jfc3RhcnQlMjglMjklM0IlMEElMjAlMjAlMjAlMjBleHRyYWN0JTI4c2hvcnRjb2RlX2F0dHMlMjhhcnJheSUyOCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMm1pbiUyMiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUzRSUyMCUyMjElMjIlMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjJtYXglMjIlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0QlM0UlMjAlMjIxMDAlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjklMkMlMjAlMjRhdHRzJTI5JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTI0cmVzdWx0JTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNEJTIwcmFuZCUyOCUyNG1pbiUyQyUyMCUyNG1heCUyOSUzQiUwQSUyMCUyMCUyMCUyMGVjaG8lMjAlMjRyZXN1bHQlM0IlMEElMjAlMjAlMjAlMjAlMjRteXZhcmlhYmxlJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNEJTIwb2JfZ2V0X2NsZWFuJTI4JTI5JTNCJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTI0bXl2YXJpYWJsZSUzQiUwQSU3RCUwQWFkZF9zaG9ydGNvZGUlMjglMjJUU19WQ1NDX0dldFJhbmRvbVBlcmNlbnQlMjIlMkMlMjAlMjJUU19WQ1NDX0dldFJhbmRvbVBlcmNlbnQlMjIlMjklM0I=”]
[TS-VCSC-Divider]
[TS-VCSC-Circliful color_foreground=”#dd3333″ circle_thickness=”10″ circle_percent_by_shortcode=”true” circle_percent_shortcode=”JTVCVFNfVkNTQ19HZXRTZWNvbmRzT2ZEYXklMjBhc3BlcmNlbnQlM0QlMjJ0cnVlJTIyJTVE” circle_value_text_by_shortcode=”true” circle_value_text_shortcode=”JTVCVFNfVkNTQ19HZXRTZWNvbmRzT2ZEYXklMjByZW1haW5pbmclM0QlMjJ0cnVlJTIyJTVE” circle_value_info=”Seconds Remaining” circle_icon_replace=”true” circle_image=”16249″]

This counter uses another shortcode that calculates the expired and/or remaining seconds of the day. The circle shows the expired seconds, while the label inside the circle shows the remaining seconds of the day.

[TS_EnlighterJS_Snippet_Single code_type=”php” code_content=”ZnVuY3Rpb24lMjBUU19WQ1NDX0dldFNlY29uZHNPZkRheSUyOCUyNGF0dHMlMjklN0IlMEElMjAlMjAlMjAlMjBvYl9zdGFydCUyOCUyOSUzQiUwQSUyMCUyMCUyMCUyMGV4dHJhY3QlMjhzaG9ydGNvZGVfYXR0cyUyOGFycmF5JTI4JTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIyZmFjdG9yJTIyJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNEJTNFJTIwJTIyMSUyMiUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMnJlbWFpbmluZyUyMiUyMCUyMCUyMCUyMCUyMCUzRCUzRSUyMCUyMmZhbHNlJTIyJTJDJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIyYXNwZXJjZW50JTIyJTIwJTIwJTIwJTIwJTIwJTNEJTNFJTIwJTIyZmFsc2UlMjIlMkMlMEElMjAlMjAlMjAlMjAlMjklMkMlMjAlMjRhdHRzJTI5JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTI0c2Vjb25kc2RheSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUyMDI0JTJBNjAlMkE2MCUzQiUwQSUyMCUyMCUyMCUyMCUyNHRpbWVzdGFtcDElMDklMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0QlMjBzdHJ0b3RpbWUlMjhkYXRlJTI4JTIyZCUyME0lMjBZJTIyJTI5JTI5JTNCJTBBJTIwJTIwJTIwJTIwJTI0dGltZXN0YW1wMiUwOSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUyMHRpbWUlMjglMjklM0IlMEElMjAlMjAlMjAlMjAlMjRyZXN1bHQlMjAlM0QlMjByb3VuZCUyOCUyOCUyNHRpbWVzdGFtcDItJTI0dGltZXN0YW1wMSUyOSUyQSUyNGZhY3RvciUyOSUzQiUwQSUyMCUyMCUyMCUyMCUyRiUyRiUyMENhbGN1bGF0ZSUyMFJlbWFpbmluZyUyMFNlY29uZHMlMjBpbiUyMERheSUwQSUyMCUyMCUyMCUyMGlmJTIwJTI4JTI0cmVtYWluaW5nJTIwJTNEJTNEJTIwJTIydHJ1ZSUyMiUyOSUyMCU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyNHJlc3VsdCUwOSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUyMCUyNHNlY29uZHNkYXklMjAtJTIwJTI0cmVzdWx0JTNCJTBBJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTJGJTJGJTIwQ29udmVydCUyMFNlY29uZHMlMjBpbiUyMFBlcmNlbnQlMEElMjAlMjAlMjAlMjBpZiUyMCUyOCUyNGFzcGVyY2VudCUyMCUzRCUzRCUyMCUyMnRydWUlMjIlMjklMjAlN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjRyZXN1bHQlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0QlMjByb3VuZCUyOCUyNHJlc3VsdCUyMCUyRiUyMCUyNHNlY29uZHNkYXklMjAlMkElMjAxMDAlMjklM0IlMEElMjAlMjAlMjAlMjAlN0QlMEElMjAlMjAlMjAlMjBlY2hvJTIwJTI0cmVzdWx0JTNCJTBBJTIwJTIwJTIwJTIwJTI0bXl2YXJpYWJsZSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzRCUyMG9iX2dldF9jbGVhbiUyOCUyOSUzQiUwQSUyMCUyMCUyMCUyMHJldHVybiUyMCUyNG15dmFyaWFibGUlM0IlMEElN0QlMEFhZGRfc2hvcnRjb2RlJTI4JTIyVFNfVkNTQ19HZXRTZWNvbmRzT2ZEYXklMjIlMkMlMjAlMjJUU19WQ1NDX0dldFNlY29uZHNPZkRheSUyMiUyOSUzQg==”]