javascript – 在x秒内填写进度条

我有这个代码……

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;
}

                                
原文地址：https://www.jb51.cc/html/426571.html
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。
                            

• 上一篇：HTML – Lightgallery无法正常工下一篇：样式化HTML电子邮件