в общем мы сделали, вот код
var progressBarArray1 = ["0.75","0.36","0.21"];
var progressBarArray2 = ["0.25","0.43","0.33"];
var progressBarArray3 = ["0.40","0.75","0.54"];
var progressBarArray4 = ["0.75","0.78","0.46"];
var progressBarArrays = [progressBarArray1,progressBarArray2,progressBarArray3,progressBarArray4];
$(function(){
var circles = $('div.circle');
var lis = $('#nav_slider a');
lis.on('click', function (a) {
var inx = $(this).index();
circles.each(function(element){
$(this).circleProgress({
startAngle: -Math.PI /2 * 8 ,
size: 130,
lineCap: 'round',
value: progressBarArrays[inx][element],
thickness: 4,
fill: {color: '#19bd9a' },
emptyFill: 'rgba(4, 115, 120, 1)'
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text((100 * stepValue).toFixed(0) + '%');
});
})
});
$('.activeSlide.detailsIcon').click()
var el = $('div.circle');
var inited = false;
el.appear({ force_process: true });
el.on('appear', function() {
if(!inited){
$(this).circleProgress({
value: $(this).data("value")
});
//inited = true;
}
});
});