在x秒内填充进度条
在x秒内填充进度条
提问于 2015-10-13 15:31:32
我有这个代码。
HTML
<div class="progress-bar">
<span class="progress-bar-fill" style="width: 30%"></span>
</div>CSS
.progress-bar {
width: calc(100% - 6px);
height: 5px;
background: #e0e0e0;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.progress-bar-fill {
display: block;
height: 5px;
background: #659cef;
border-radius: 3px;
transition: width 250ms ease-in-out;
}它应该显示滑块的进度，以及当前图像将持续多长时间直到下一个图像...
如果图像每5秒更改一次，那么我希望条形图在5秒内填满100%…我对javascript和jQuery一窍不通...
回答 2
Stack Overflow用户
发布于 2017-04-08 14:14:01
您可以让jQuery在一次操作中设置转换声明。
填写5s：
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
立即清空：
$(".progress-bar-fill").css({"width":"0%","transition":"none"});
Stack Overflow用户
发布于 2018-06-08 05:57:11
或者你可以这样做：
HTML
<div id="container"></div>CSS
#container {
margin: 20px;
width: 400px;
height: 8px;
position: relative;
}Babel + 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这一切都可以调到https://jsfiddle.net干杯上！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33096675
复制相关文章
相似问题
腾讯云开发者
