admin 管理员组

文章数量: 1086019


2024年2月27日发(作者：前端和后端交互)

CSS+Vue实现页面加载进度条

2022-12-26

CSS+Vue实现页面加载进度条

一、动画样式

#global_loading{

background: linear-gradient(to right,rgb(73, 149, 221),#fff,rgb(173,

203, 231));

height: 4px;

position: fixed;

z-index:999;

width: 0;

top: 0;

left: 0;

animation: grow 1.5s infinite forwards;//重复动画

}

@keyframes grow{

from{

width: 0;

}

to{

width: 100%;

}

}

二、在路由设置中实现

页面加载钱创建div容器 加载完成后隐藏显示display=none

Each((to, from, next) => {

//页面加载前，显示加载条

let loadingBar = mentById('global_loading')

if (!loadingBar) {

loadingBar = Element('div')

= 'global_loading'

(loadingBar)

} else {

y = 'block'

}

//0.5秒后跳转下一步

setTimeout(() => {

next()

}, 500)

})

ach((to, from) => {

//页面加载完成，顶部加载条消失

let loadingBar = mentById('global_loading')

if (loadingBar) {

y = 'none'

}

})

三、动画效果

在这里插入图片描述


本文标签： 加载 页面 动画 实现 插入

版权声明：本文标题：(1)CSS+Vue页面加载进度条 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1709034972a536647.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。