一个页面等图片资源全部加载完成，会需要很长时间，用户体验会很差，所以我们需要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判断页面是否加载完成，使用一个document 的 Document.readyState 属性描述了文档的加载状态。complete / 完成文档和所有子资源已完成加载。表示 load状态的事件即将被触发
当document.readyState == "complete"，表示页面所有内容已被完全加载此时可以隐藏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.效果图如下，可根据自己需求修改样式，已经进度条进度时间，进度曲线等~~
