Question

我在html模板中使用颜色选择器选项。我不会通过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) {
  // ...

如何通过css更改进度条填充颜色

1 个答案: