Mess4me,
он все подставляет, но прогресс бар не работает

Mess4me,
и да вместо value: circles.data("value"), подставлял число и оно работало

Mess4me,
А если сделать вручную, то все они загрузятся со значением 0.3, а не 0.3, 0.4, 0.5

<div id="circles">
            <div class="circle" data-value="0.3">
              <strong></strong>
            </div>
          <div class="circle" data-value="0.4">
            <strong></strong>
          </div>
          <div class="circle" data-value="0.5">
            <strong></strong>
          </div>

Mess4me,
так, последнее решил, теперь чтобы из массива работали нужно

Artem_A,
теперь

var newCicles = document.querySelectorAll('.circle');

и в цикле

c4.circleProgress({
      startAngle: -Math.PI /2 * 8 ,
      lineCap: 'round',
      value: c4.data("value"),
      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) + '%');
  });
});

Artem_A,

теперь так наверное

var newCicles = document.querySelectorAll('.circle');
            
            newCicles.forEach(function (el) {
                el.circleProgress({
                    startAngle: -Math.PI /2 * 8 ,
                    lineCap: 'round',
                    value: el.getAttribute('data-value'),
                    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) + '%');
                });
            });

в общем мы сделали, вот код

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;
   }
 });
});

Mess4me,
Спасибо большое за помощь и терпение!!

Artem_A,
:victory:

Mess4me,
только еще одно но, когда скроллишь он делает задержки 01% 01% 01% дергается, а потом только загружается, и если скролл убираешь потом опять приходишь к прогресс бару он заново загружается