一个页面等图片资源全部加载完成，会需要很长时间，用户体验会很差，所以我们需要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: 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%;} }
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.效果图如下，可根据自己需求修改样式，已经进度条进度时间，进度曲线等~~
