我想使用progressbar.js库制作一个带有百分比的圆形进度条,就像本示例中的那个一样: https://jsfiddle.net/kimmobrunfeldt/72tkyn40/
这是我的js代码:
window.onload = function onLoad() {
var bar = new ProgressBar.Circle(progress, {
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.text.style.color = '#aaa';
bar.animate(1.0); // Number from 0.0 to 1.0
};
HTML:
<div class="progress" id="progress"></div>
仅显示圆圈,不显示文字。有人可以告诉我原因吗?