进度栏文字不正确

时间:2019-06-01 20:21:59

标签: javascript html css

我想使用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>

仅显示圆圈,不显示文字。有人可以告诉我原因吗?

0 个答案:

没有答案