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.

  • 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!

Circle Counter with Font Icons

Circle Counter with Images

Circle Counter with Dynamic Values

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.

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.

function TS_VCSC_GetRandomPercent($atts){
    ob_start();
    extract(shortcode_atts(array(
        "min"           => "1",
        "max"           => "100",
    ), $atts));
    $result             = rand($min, $max);
    echo $result;
    $myvariable         = ob_get_clean();
    return $myvariable;
}
add_shortcode("TS_VCSC_GetRandomPercent", "TS_VCSC_GetRandomPercent");

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.

function TS_VCSC_GetSecondsOfDay($atts){
    ob_start();
    extract(shortcode_atts(array(
        "factor"        => "1",
        "remaining"     => "false",
        "aspercent"     => "false",
    ), $atts));
    $secondsday         = 24*60*60;
    $timestamp1	       = strtotime(date("d M Y"));
    $timestamp2	       = time();
    $result = round(($timestamp2-$timestamp1)*$factor);
    // Calculate Remaining Seconds in Day
    if ($remaining == "true") {
        $result	       = $secondsday - $result;
    }
    // Convert Seconds in Percent
    if ($aspercent == "true") {
        $result         = round($result / $secondsday * 100);
    }
    echo $result;
    $myvariable         = ob_get_clean();
    return $myvariable;
}
add_shortcode("TS_VCSC_GetSecondsOfDay", "TS_VCSC_GetSecondsOfDay");