如何增加 javascript 进度条的进度？

Question

我正在尝试向我的网站添加一个简单的 javascript 进度条，我找到了一些脚本，但我总是遇到同样的问题 - 我能够初始化加载程序并将其设置为递增到一个给定的值，但不能分步进行。这是一个简单的例子 - https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/

末尾有：

bar.animate(1.0);

我怎样才能让它一步步动画化？让我们先说到 50%，然后（2 秒后）到 75%，然后是 100%。我试过了

bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);

以及：

setTimeout(function(){bar.animate(0.5)}, 2000);
setTimeout(function(){bar.animate(0.75)}, 2000);
setTimeout(function(){bar.animate(1)}, 2000);

但它总是选择最后一个（最高）值，而不是逐步动画。任何建议都适用。

Answer 1

bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);

以上代码同时运行s，最后一个覆盖其他。

setTimeout(function(){bar.animate(0.5); console.log("animate")}, 2000);
    console.log('timeout 1 called');
 setTimeout(function(){bar.animate(0.75); console.log("animate")}, 2000);
    console.log('timeout 2 called');
setTimeout(function(){bar.animate(1); console.log("animate")}, 2000);
    console.log('timeout 3 called');

一旦设置了第一个超时，就不会等待延迟再设置下一个。检查控制台上的日志以查看发生了什么。

问题是那些脚本运行同时。做这样的事情（或更好的事情）：

bar.animate(0.5);  // Number from 0.0 to 1.0
setTimeout(function () {
    bar.animate(0.75);
}, 2000);

setTimeout(function () {
    bar.animate(1.0);
}, 4000);

如果您只想按顺序为栏设置动画，您也可以使用 CSS 制作关键帧。

Answer 2

问题是，基本上，您是在排队同时执行所有步骤。相反，您想将回调传递给 animate 函数，这样当它完成时，您可以告诉它进入下一步。

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {
    width: '100%',
    height: '100%'
  },
  text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {
    color: '#FFEA82'
  },
  to: {
    color: '#ED6A5A'
  },
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});

// Keep track of the current value
var value = 0;
setTimeout(function increment() {
  value += 0.1;
  bar.animate(value, function() {
    // Animation has completed, queue up another step
    if (value < 1) {
      setTimeout(increment, 500);
    }
  });
}, 1000);

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

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>

如何增加 javascript 进度条的进度？

How to increment the progress in javascript progress bar?

javascript

jquery

progress-bar