vue页面加载进度条,vue用steps实现进度条功能
这篇文章主要为大家详细介绍了某视频剪辑软件实现动态进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现动态进度条效果的具体代码，供大家参考，具体内容如下
演示效果：
结构
进度/索引。射流研究…
常量控制器={
init:要求(./控制器/html )，
速度：要求(。/控制器/速度)
}
exports.init=controller.init
出口速度=控制器速度
进度/控制器/html/索引. js
exports.set=()={
设DOM=document。createelement( div )
dom.setAttribute(id ， progress_speed )
dom.classList.add(进度框,进度隐藏)
多姆。innerhtml= div class= progress progress-speed-hide id= progress _ box _ speed div class= speed style= width:0%；背景：# f2f3f5过渡：0.2s/div/div
document.getElementById(app ).insertBefore(dom，document.getElementById(app ).第一胎)
let Style=`。进度框{
宽度：100%;
身高：100%;
转场：0.4秒
位置：固定；
top:0；
左：0;
背景：rgba(0，0，0，0.5)；
z指数：4002;
}。进度{
边框半径：19px
背景：# f2f3f5
宽度：80%;
高度：38px
位置：固定；
top:calc(50%-19px)；
左：calc(50%-40%)；
z指数：2000;
转场：0.4秒
不透明度：1;
}。进度-隐藏{
边框半径：19px
宽度：0%;
身高：0%;
top:calc(50%-0%)；
左：calc(50%-0%)；
转场：0.2秒
溢出：隐藏；
}。进度-速度-隐藏{
宽度：0%;
高度：0px
转场：0.6秒
不透明度：0;
溢出：隐藏；
}。速度{
边框半径：19px
背景-图片：-WebKit-线性-渐变(45度，rgba(255，255，255，15) 25%,透明25%,透明50%，rgba(255，255，255，15) 50%，rgba(255，255，255，15) 75%,透明75%,透明);
背景-图像：-哦-线性-渐变(45度，rgba(255，255，255，15) 25%,透明25%,透明50%，rgba(255，255，255，15) 50%，rgba(255，255，255，15) 75%,透明75%,透明);
背景图像：线性渐变(45度，rgba(255，255，255，15) 25%,透明25%,透明50%，rgba(255，255，255，15) 50%，rgba(255，255，255，15) 75%,透明75%,透明);
高度：38px
-WebKit-background-size:40px 40px；
背景尺寸：40像素40像素
宽度：0%;
转场：0.3秒
背景色：# 409EFF
-o-动画：进度条-条形2s线性无限；
动画：进度条-条纹2s线性无限；
}。速度-成功{
宽度：100%;
背景色：# 67c23a
}
@-网络工具包-关键帧进度-条形-条纹{
从{
背景-位置：40px 0
}
到{
背景-位置：0 0
}
}
@-o-关键帧进度条-条纹{
从{
背景-位置：40px 0
}
到{
背景-位置：0 0
}
}
@关键帧进度条-条纹{
从{
背景-位置：40px 0
}
到{
背景-位置：0 0
}
}`
让样式元素=文档。getelementbyid(“进度”)
如果(!styleElement) {
样式元素=文档。createelement(“样式”)
styleElement.type=text/css
styleElement.id=progress
文档。getelementsbytagname( head )[0].appendChild(styleElement)
样式元素。appendchild(文档。创建文本节点(样式))
}
}
进度/控制器/速度/索引。射流研究…
exports.run=(time)={
文档。getelementbyid( progress _ speed )。班级名单。删除(“进度-隐藏”)
时间=时间* 100
让DOM=文档。getelementbyid( progress _ box _ speed )
多姆。班级名单。删除(“进度-速度-隐藏”)
多姆。getelementsbyclassname( speed )[0]。班级名单。移除(“速度-成功”)
setTimeout(()={
多姆。getelementsbyclassname( speed )[0].setAttribute(style ， width: time % )
}, 10)
如果（时间=100) {
setTimeout(()={
多姆。getelementsbyclassname( speed )[0]。班级名单。添加(“速度-成功”)
多姆。getelementsbyclassname( speed )[0].setAttribute(style ， width:100% )
多姆。班级名单。添加(“进度-速度-隐藏”)
setTimeout(()={
文档。getelementbyid( progress _ speed )。班级名单。添加(“进度-隐藏”)
多姆。getelementsbyclassname( speed )[0].setAttribute(style ， width:0% )
}, 900)
}, 1000)
}
}
如何使用？
主页。射流研究…中导入（根据你自己新建文件的路径为基准，这是我自己的路径)
从导入进度。/常见/进度
全局挂载
vue。原型。$ progress=进度
结构
使用：
这个. progress.init.set()
这个10.95美元的进步。速度。运行( 10.555555 )//这样进度条就走到10.555555%了
进度条走到100之后，会自动隐藏！可以全局挂载，然后各种需要进度条的地方再使用！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。