Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

css3实现loading效果--当页面加载过程中显示Loading的进度条,全部加载完成之后进度条消失

_skylar 2019-08-15 16:06:00 阅读数:19 评论数:0 点赞数:0 收藏数:0

一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程!

emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼那就不考虑了

那么就用css写一个~~

语法:

animation: name duration timing-function delay iteration-count direction;

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

1、设置进度条起始宽度0%,3s之内宽度移动85%,为什么不设置100%呢? 因为3s进度条就加载到100%,如果我们的页面却迟迟没有加载完成,那么完全影响用户体验,所以我们设置到85%就让进度条停了下来,然后页面加载完成之后隐藏进度条,实现以假乱真!

 /* loading */
.loading {
background: #000;
position: absolute;
z-index:;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.progress {
position: relative;
width: 200px;
height: 8px;
background: #fff;
border-radius: 20px;
margin-top: 20px;
}
.progress-bar {
position: absolute;
left:;
top:;
height: 8px;
line-height: 20px;
border-radius: 20px;
background: #d7bb29;
animation: animate-positive 3s;
}
@keyframes animate-positive {
from {width:0px;}
to {width:85%;}
}
@-webkit-keyframes animate-positive {
from {width:0px;}
to {width:85%;}
}

 

2.js判断页面是否加载完成,完成之后隐藏loading

 var loading = document.getElementById("loading");
if (document.readyState == "complete") {
// 页面加载完毕
loading.style.display = "none";
}

3.附上demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>loading</title>
<style>
/* loading */
.loading {
background: #000;
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.progress {
position: relative;
width: 200px;
height: 8px;
background: #fff;
border-radius: 20px;
margin-top: 20px;
}
.progress-bar {
position: absolute;
left: 0;
top: 0;
height: 8px;
line-height: 20px;
border-radius: 20px;
background: #d7bb29;
animation: animate-positive 3s;
}
@keyframes animate-positive {
from {width:0px;}
to {width:85%;}
}
@-webkit-keyframes animate-positive {
from {width:0px;}
to {width:85%;}
}
</style>
</head>
<body>
<div id="loading" class="loading">
<div class="progress">
<div class="progress-bar">
</div>
</div>
</div>
<script>
var loading = document.getElementById("loading");
if (document.readyState == "complete") {
// 页面加载完毕
// loading.style.display = "none";
 }
</script>
</body>
</html>

4.效果图如下,可根据自己需求修改样式,已经进度条进度时间,进度曲线等~~

                                                                                                                                                                                                                                                                                                                                                                                                                     

版权声明
本文为[_skylar]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/imMeya/p/11358573.html