Javascript 在x秒内填充进度条

我有这个密码

HTML

它应该显示滑块的进度以及当前图像到下一个出现的持续时间

如果图像每5秒钟更改一次，那么我希望在5秒钟内将条形图填满100%。。。我完全不懂javascript和jQuery…

你可以使用它

更新：- 进行

转换

5秒

transition：宽度5s，方便进出


$（'.progress bar fill'）。延迟（1000）。队列（函数（）{
$（this.css（'width'，'100%”）
});
。进度条{
宽度：计算（100%-6px）；
高度：5px；
背景：#e0；
填充：3倍；
边界半径：3px；
长方体阴影：插入0 1px 3px rgba（0,0,0,2）；
}
.进度条填充{
显示：块；
高度：5px；
背景：ʓCEF；
边界半径：3px；
/*过渡：宽度250ms，易于进出*/
过渡：宽度5s，易于进出；
}
您可以让jQuery一次性设置转换声明

填写5s：

$（“.progress bar fill”）.css（{“width”：“100%”，“transition”：“5s”}）

要立即清空：

$（“.progress bar fill”）.css（{“width”：“0%”，“transition”：“none”}）
或者您可以执行以下操作：

HTML

<div id="container"></div>

巴别塔+JSX

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) + ' %');
}
});

bar.animate(1.0);  // Number from 0.0 to 1.0

一切都可以继续
干杯
 对不起，不是这样的。。。我不希望动画发生在5秒后，然后只填充一个。。。我希望填充过程能一直持续5秒。。。
<div id="container"></div>

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

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) + ' %');
}
});

bar.animate(1.0);  // Number from 0.0 to 1.0