文章目录
- 一、定时器实现进度条
- 二、css3实现进度条
- 三、加载状态事件实现进度条
一、定时器实现进度条
原理：设置了固定的时间后将图片和遮罩层隐藏,显示出页面的内容
效果1：
定时器实现的进度条效果
代码实现
<!DOCTYPE html>
<html lang='en'><head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>lmx</title>
</head><style>* {padding: 0;margin: 0;}body {background-color: #f6f6f6;}.loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 9999;background: #fff;}.loading .pic {width: 64px;height: 64px;background: url(img/Running\ heart.gif);/** 在https://preloaders.net/选择自己喜欢的gif **/position: absolute;background-size: 100% 100%;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}.imgs {width: 100%;display: flex;flex-wrap: wrap;}img {flex: 1;width: 20%;height: auto;vertical-align: middle;}
</style><body><div class='loading' id='loading'><div class='pic'></div></div><div class="imgs"><img src="https://img2.baidu.com/it/u=463842799,984448752&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"alt=""><imgsrc="https://img1.baidu.com/it/u=851989706,374477030&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"alt=""><imgsrc="https://img0.baidu.com/it/u=819920547,2844342082&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"alt=""><imgsrc="https://img2.baidu.com/it/u=3448354744,1362206024&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500.webp"alt=""><imgsrc="https://img2.baidu.com/it/u=3185636914,4082760025&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"alt=""><imgsrc="https://img2.baidu.com/it/u=2878460091,2929846652&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"alt=""><imgsrc="https://img0.baidu.com/it/u=4101594417,2919542589&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"alt=""><imgsrc="https://img2.baidu.com/it/u=2567022104,3971898384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"alt=""><imgsrc="https://img1.baidu.com/it/u=4131986913,2344038461&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"alt=""><imgsrc="https://img0.baidu.com/it/u=156148580,3161347012&fm=253&fmt=auto&app=138&f=PNG?w=501&h=500.webp"alt=""></div>
</body>
<script>
/** window.onload是一个事件，就是在文档加载完成之后触发的事件，可以为这个事件添加事件处理函数 **/window.onload = function () {setTimeout(function () {var oLoding = document.getElementById('loading');oLoding.style.display = 'none';}, 1000);}
</script></html>
效果2：
代码实现：
<!DOCTYPE html>
<html lang='en'><head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>lmx</title>
</head><style>#box {width: 0;height: 45px;background-color: hotpink;}
</style><body><div id="box"></div><div id="num"></div><script>let box = document.getElementById('box') let num = document.getElementById('num') //获取dom元素let cliWidth = document.documentElement.clientWidth //获取可视区域的宽度let boxWidth = 0 //box盒子宽度默认设置为0function jinDu() {boxWidth += 25 // 每100毫秒累加25if (boxWidth >= cliWidth) { // 判断当盒子的宽度大于页面可视区域的宽度时boxWidth = cliWidth // 为了避免宽度超出让盒子宽度等于可视区域的宽度clearInterval(timer) // 清除定时器}box.style.width = boxWidth + 'px' // 宽度赋值num.innerText = (boxWidth / cliWidth * 100).toFixed(2) + '%' // 所占百分比赋值}let timer = setInterval(jinDu, 100) //定时器 每100毫秒执行一次</script>
</body></html>
二、css3实现进度条
效果：
代码实现：
<!DOCTYPE html>
<html lang='en'><head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>lmx</title>
</head><style>* {margin: 0;padding: 0;}#loading {width: 100%;height: 100%;position: fixed;}#loading .pic {width: 90px;height: 50px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;z-index: 100;}#loading .pic i {display: block;width: 9px;height: 50px;float: left;margin: 0 2px;background: #00CC99;-webkit-transform: scaleY(0.4);-ms-transform: scaleY(0.4);transform: scaleY(0.4);-webkit-animation: load 1.2s infinite;animation: load 1.2s infinite;}@-webkit-keyframes load {0%,40%,100% {-webkit-transform: scaleY(1);transform: scaleY(1);}20% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}}#loading .pic i:nth-child(2) {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}#loading .pic i:nth-child(3) {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}#loading .pic i:nth-child(4) {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}#loading .pic i:nth-child(5) {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}#loading .pic i:nth-child(6) {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
</style><body><div id="loading"><div class="pic"><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
</body></html>
三、加载状态事件实现进度条
1）document.onreadystatechange 页面加载状态改变时的事件
2）document.readyState 返回当前文档的状态
<!DOCTYPE html>
<html lang='en'><head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>lmx</title>
</head><style>.loading {width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 100;background: #FFF;}.loading .pic {width: 64px;height: 64px;background: url(img/Running\ heart.gif);position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}#imgs{width: 100%;display: flex;flex-wrap: wrap;}img{width: 20%;height: auto;}
</style>
<script src="./jQuery文件//jquery-1.12.1.min.js"></script>
<script>document.onreadystatechange = function () { //加载状态改变的事件if (document.readyState == "complete") { //当前文档加载完成$(".loading").fadeOut(); // fadeOut淡出，隐藏被选元素}}
</script>
</head><body><div class="loading"><div class="pic"></div></div><div id="imgs"><img src="https://img2.baidu.com/it/u=463842799,984448752&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"alt=""><imgsrc="https://img1.baidu.com/it/u=851989706,374477030&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"alt=""><imgsrc="https://img0.baidu.com/it/u=819920547,2844342082&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500.webp"alt=""><imgsrc="https://img2.baidu.com/it/u=3448354744,1362206024&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500.webp"alt=""><imgsrc="https://img2.baidu.com/it/u=3185636914,4082760025&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400.webp"></div>
</body>
</html>
