Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Circle Counters With All The Possible Options You Can Think Of
<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: true,
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: true,
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: true,
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: true,
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);
});
}
});