Как изменить цвет заливки progressbar css

Question

Я использую опцию выбора цвета в своем шаблоне html. Я не изменяю цвет заливки progressbar с помощью css, потому что индикатор выполнения заливки меняет цвет из кода javascript. Как я могу изменить его с помощью кода css. я включить этот плагин здесь

$(document).ready(function ($) { 
    function animateElements() { 
     $('.progressbar').each(function() { 
      var elementPos = $(this).offset().top; 
      var topOfWindow = $(window).scrollTop(); 
      var percent = $(this).find('.circle').attr('data-percent'); 
      var percentage = parseInt(percent, 10)/parseInt(100, 10); 
      var animate = $(this).data('animate'); 
      if (elementPos < topOfWindow + $(window).height() - 30 && !animate) { 
       $(this).data('animate', true); 
       $(this).find('.circle').circleProgress({ 
        startAngle: -Math.PI/2, 
        value: percent/100, 
        thickness: 14, 
        fill: { 
         color: '#1B58B8' 
        } 
       }).on('circle-animation-progress', function (event, progress, stepValue) { 
        $(this).find('div').text((stepValue*100).toFixed(1) + "%"); 
       }).stop(); 
      } 
     }); 
    } 

    // Show animated elements 
    animateElements(); 
    $(window).scroll(animateElements); 
}); 

Demo Here

Answer 1

Похоже, графики втягиваются в холст. Таким образом, вы не можете указать цвет заливки в своем CSS. Вы должны сделать это в своем JS.

Если вы не возражаете, добавив некоторые дополнительные данные для вашего div с, затем быстрый хак может быть ниже код (рабочий fiddle):

<!--           HERE ====| --> 
<div class="progressbar" data-animate="false" data-fill-color="#ff000"> 
    <div class="circle" data-percent="100"> 
    <div></div> 
    <p>Testing</p> 
    </div> 
</div> 
<!--       DIFFERENT COLOR HERE ====| --> 
<div class="progressbar" data-animate="false" data-fill-color="#000"> 
    <div class="circle" data-percent="30.5"> 
    <div></div> 
    <p>Testing</p> 
    </div> 
</div> 

$('.progressbar').each(function() { 
    // ... 

    value: percent/100, 
    thickness: 14, 

    fill: { 
    color: $(this).data('fill-color') // <===== HERE 
    } 

    }).on('circle-animation-progress', function(event, progress, stepValue) { 
    // ...