Circle Counter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor

Circle Counters

Circle Counters With All The Possible Options You Can Think Of

Value Progress
Animation Progress
Value In Decimal
Without Counter
                                
<div class = "col-lg-3 wdpk-cicles">
    <div class = "wdpk-cicles-wrapper">
        <div id = "wdpkCircle">
            <div class="wdpk-cicles-counter-number"></div>
        </div>
    </div>
    <h6 class="my-3 text-center">Value Progress</h6>
</div>
<div class = "col-lg-3 wdpk-cicles">
    <div class = "wdpk-cicles-wrapper">
        <div id = "wdpkCircle2">
            <div class="wdpk-cicles-counter-number"></div>
        </div>
    </div>
    <h6 class="my-3 text-center">Animation Progress</h6>
</div>
<div class = "col-lg-3 wdpk-cicles">
    <div class = "wdpk-cicles-wrapper">
        <div id = "wdpkCircle3">
            <div class="wdpk-cicles-counter-number"></div>
        </div>
    </div>
    <h6 class="my-3 text-center">Value In Decimal</h6>
</div>
<div class = "col-lg-3 wdpk-cicles">
    <div class = "wdpk-cicles-wrapper">
        <div id = "wdpkCircle4">
            <div class="wdpk-cicles-counter-number"></div>
        </div>
    </div>
    <h6 class="my-3 text-center">Without Counter</h6>
</div>
                                
                            
                        

/* No Changes Made To Default Variables */

                        
                    
                        
jQuery(document).ready(function ()
{
    if (jQuery(".wdpk-cicles").length !== 0)
    {
        let obj = {
            selectorID: 'wdpkCircle',
            value: 0.57,
            size: 125,
            startAngle: -Math.PI / 2,
            reverse: false,
            thickness: '15',
            lineCap: 'butt',  // Arc line cap: "butt", "round" or "square"
            fill: {color: "#0056c6"},
            emptyFill: 'rgba(0,0,0,.1)',
            valueProgress: true,
            animationProgress: false,
            valueTotal: 2, /// can either be 1 or 100. Set `1` for one and `2` for 100
            decimalPlaces: 2, // only applicable if valueTotal is set to 1
            suffixSymbol: '%',
            animation: {duration: 1600, easing: "circleProgressEasing"},
        };

        let obj2 = {
            selectorID: 'wdpkCircle2',
            value: .9, /// The maximum value can only be 1
            size: 125,
            startAngle: -Math.PI / 2, // specify the starting angle here
            reverse: false,
            thickness: '4',
            lineCap: 'butt',  // Arc line cap: "butt", "round" or "square"
            fill: {color: "#0056c6"},
            valueProgress: false,
            animationProgress: true,
            valueTotal: 2,/// can either be 1 or 100. Set `1` for one and `2` for 100
            decimalPlaces: 2, // only applicable if valueTotal is set to 1
            suffixSymbol: '%',
            emptyFill: 'rgba(0,0,0,.1)',
            animation: {duration: 1600, easing: "circleProgressEasing"},
        };

        let obj3 = {
            selectorID: 'wdpkCircle3',
            value: 0.86,
            size: 125,
            startAngle: -Math.PI / 2,
            reverse: false,
            thickness: 'auto',
            lineCap: 'round',  // Arc line cap: "butt", "round" or "square"
            fill: {color: "#0056c6"},
            valueProgress: true,
            animationProgress: false,
            valueTotal: 1, /// can either be 1 or 100. Set `1` for one and `2` for 100
            decimalPlaces: 2, // only applicable if valueTotal is set to 1
            suffixSymbol: '',
            emptyFill: 'rgba(0,0,0,.1)',
            animation: {duration: 1600, easing: "circleProgressEasing"},
        };
        let obj4 = {
            selectorID: 'wdpkCircle4',
            value: 0.91,
            size: 125,
            startAngle: -Math.PI / 2,
            reverse: false,
            thickness: '63',
            lineCap: 'butt',  // Arc line cap: "butt", "round" or "square"
            fill: {color: "#0056c6"},
            valueProgress: false,
            animationProgress: false,
            valueTotal: 2, /// can either be 1 or 100. Set `1` for one and `2` for 100
            suffixSymbol: '%',
            decimalPlaces: 2, // only applicable if valueTotal is set to 1
            emptyFill: 'rgba(0,0,0,.1)',
            animation: {duration: 1600, easing: "circleProgressEasing"},
        };
        require(["app/shortcodes/wdpkCircle"], function (e)
        {
            e.publicCall(obj);
            e.publicCall(obj2);
            e.publicCall(obj3);
            e.publicCall(obj4);
        });
    }
});