加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

javascript – 在x秒内填写进度条

发布时间:2020-12-14 23:11:23 所属栏目:资源 来源:网络整理
导读:我有这个代码 HTML CSS .progress-bar { width: calc(100% - 6px); height: 5px; background: #e0e0e0; padding: 3px; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,.2);}.progress-bar-fill { display: block; height: 5px; background: #659ce

我有这个代码……

HTML

CSS

.progress-bar {
    width: calc(100% - 6px);
    height: 5px;
    background: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(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中总是noob …

最佳答案
你可以使用它.

更新: –
过渡5秒.

过渡:宽度5s易于进出;

$('.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,.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;
}