javascript 在 x 秒内填充进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33096675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fill progress bar in x seconds
提问by Reel
I have this code...
我有这个代码...
HTML
HTML
<div class="progress-bar">
<span class="progress-bar-fill" style="width: 30%"></span>
</div>
CSS
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;
}
It's supposed to show the progress of slider and how long the current image will last till the next one apperas....
它应该显示滑块的进度以及当前图像将持续多长时间直到下一个出现....
If the image changes every 5 seconds, then I want the bar to fill out 100% in 5 seconds... I'm total noob in javascript and jQuery...
如果图像每 5 秒更改一次，那么我希望该栏在 5 秒内填满 100%...我完全是 javascript 和 jQuery 的菜鸟...
回答by Mukul Kant
You can use it.
你可以使用它。
Update :-make transition5 second.
更新：-制作transition5 秒。
transition: width 5s ease-in-out;
transition: width 5s ease-in-out;
$('.progress-bar-fill').delay(1000).queue(function () {
$(this).css('width', '100%')
});.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;*/
transition: width 5s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
<span class="progress-bar-fill" style="width: 30%"></span>
</div>I hope it will helps you.
我希望它会帮助你。
回答by Eric Warnke
You could have your jQuery set the transition declaration in one shot.
您可以让您的 jQuery 一次性设置转换声明。
To fill in 5s:
填写5s：
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
To empty instantly:
立即清空：
$(".progress-bar-fill").css({"width":"0%","transition":"none"});
$(".progress-bar-fill").css({"width":"0%","transition":"none"});
回答by Pink Hair Vlogs
Or you could do this:
或者你可以这样做：
HTML
HTML
<div id="container"></div>
CSS
CSS
#container {
margin: 20px;
width: 400px;
height: 8px;
position: relative;
}
Babel + JSX
巴别塔 + 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
It can all tun on https://jsfiddle.netCheers!
它都可以在https://jsfiddle.net 上调谐 干杯！
