Question

我的进度具有不同的笔触颜色，具体取决于百分比。现在我想让整个进度条中风的笔触颜色与百分比不同。

这是fiddle我希望其他50％是红色而另一个是橙色。我似乎无法找到如何在其上添加颜色。

HTML：

<div id="container"></div>
<div id="container1"></div>

CSS：

#container, #container1 {
    width: 100px;
    height: 100px;
}

#container > svg, #container1 > svg {
    width: 100%;
    display: block;
}

JS：

var circle = new ProgressBar.Circle('#container', {
    color: '#FCB03C',
    strokeWidth: 5,
    trailWidth: 1,
    duration: 1500,
    text: {
        value: '0'
    },
    step: function(state, bar) {
        bar.setText((bar.value() * 100).toFixed(0));
    }
});

circle.animate(.5);  // Number from 0.0 to 1.0


var circle = new ProgressBar.Circle('#container1', {
    color: '#FCB03C',
    strokeWidth: 5,
    trailWidth: 1,
    duration: 1500,
    text: {
        value: '0'
    },
    step: function(state, bar) {
        bar.setText((bar.value() * 100).toFixed(0));
    }
});

circle.animate(.7);  // Number from 0.0 to 1.0

在小提琴上here。它在第二个圆圈上是否具有与橙色相同的蓝色动画？而不是立即出现

Answer 1

试试这个： -

var circle = new ProgressBar.Circle('#container', {
color: '#FCB03C',
strokeWidth: 5,
trailWidth: 1,    
text: {
    value: '0'
},
step: function(state, bar) {
    bar.setText((bar.value() * 100).toFixed(0));       
 }
});
 circle.animate(.5,function(){
  $('#container path:first-child').attr('stroke','#4679BD').attr('stroke-width',5);
 });

Demo

进度条中风颜色

1 个答案: