javascript - 进度条描边颜色

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

在 fiddle 上 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