进度条描边颜色

progress bar stroke color

本文关键字：颜色      更新时间：2023-09-26

我有一个进度，根据百分比有不同的笔触颜色。现在我想让整个进度条笔触的笔触颜色与百分比不同。

这是小提琴，我想让其他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

On the Fiddle here。有可能在第二个圆上有蓝色的动画和橙色的动画一样吗?而不是出现在瞬间

试试这个:-

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

相关文章：