Question

我有一个像jsfiddle这样的进度条，我想改变默认为白色的路径的颜色。

// progressbar.js@1.0.0 version is used
var bar = new ProgressBar.Circle(container, {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 4,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
        autoStyleContainer: false
    },
    from: {
        color: '#aaa',
        width: 1
    },
    to: {
        color: '#333',
        width: 4
    },
    // Set default step function for all animate calls
    step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
        circle.path.setAttribute('stroke-width', state.width);

        var value = Math.round(circle.value() * 100);
        if (value === 0) {
            circle.setText('');
        } else {
            circle.setText(value);
        }

    }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0); // Number from 0.0 to 1.0

#container {
    margin: 20 px;
    width: 200 px;
    height: 200 px;
    position: relative;
}

<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>

此example

中紫色条下的“白条”

你知道我该怎么办？

提前致谢

Answer 1

您可以简单地添加trailColor属性并设置其值。
示例：trailColor: 'silver',

progressbar.js - ＆gt;更改进度条的轨迹颜色

1 个答案: