我有这个代码...
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;
}
它应该显示 slider 的进度以及当前图像将持续到下一个应用程序的时间....
如果图像每 5 秒更改一次,那么我希望条形图在 5 秒内填满 100%...我完全是 javascript 和 jQuery 的菜鸟...
最佳答案
你可以使用它。
更新:-
使 transition
5 秒。
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>
希望对您有所帮助。
关于javascript - 在 x 秒内填充进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33096675/