使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏

网页使用loading可以给用户带来更好的体验，避免网页渲染中长时间出现网页整体空白从而影响访客的体验，loading在部分大型APP也有在应用。

下面使用HTML+CSS+JS实现完整的Loading效果。

请先引入jQuery，因为JS定时隐藏依赖jq。

1.HTML

<div class="loaderbg"><div class="spinner"><div class="double rect1"></div><div class="double rect2"></div><div class="double rect3"></div><div class="double rect4"></div><div class="double rect5"></div></div>
</div>

loaderbg类为loading的背景色，为白色。

2.CSS

.loaderbg {background-color: #fff;width: 100%;height: 100%;overflow: hidden;position: fixed;left: 0;top: 0;z-index: 99999999
}::-webkit-scrollbar {width: 7.5px;height: 6px;background-color: #f0f0f0;display: none
}::-webkit-scrollbar-thumb {background-color: #b1b1b1;border-radius: 15px
}::-webkit-scrollbar-thumb:hover {background-color: #777
}.spinner {position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -30px;width: 50px;height: 60px;text-align: center;font-size: 10px
}.spinner>.double {background: #49a9ee;height: 100%;width: 6px;display: inline-block;-webkit-animation: stretchDelay 1.2s infinite ease-in-out;animation: stretchDelay 1.2s infinite ease-in-out
}.spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s
}.spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s
}.spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s
}.spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s
}@-webkit-keyframes stretchDelay {0%,40%,100% {-webkit-transform: scaleY(.4)}20% {-webkit-transform: scaleY(1)}
}@keyframes stretchDelay {0%,40%,100% {transform: scaleY(.4);-webkit-transform: scaleY(.4)}20% {transform: scaleY(1);-webkit-transform: scaleY(1)}
}

3.JS

js在这里的作用为定时或网页加载完成后关闭loaderbg类

//页面加载完成之后隐藏loading
$(window).load(function () {$(".loaderbg").hide();
});//设置页面加载3秒之后隐藏loading
/*$(function () {setTimeout(function () {$(".loaderbg").hide();alert("页面加载完成啦！");},3000);
})*/

第一种方法是等待网页全部加载完成后再隐藏loading，但同时如果网页其他资源文件加载缓慢（如图片等），loading也会随之存在更长时间。

第二中方法是设置定时隐藏loading，可以根据实际需求更改隐藏时间，默认为3s。

建议实际使用时，删除 alert("页面加载完成啦！"); 避免引起用户反感，只做效果测试。

以上第一种方法jquery低版本测试正常，高版本可能会报错：ncaught TypeError: a.indexOf is not a function
at r.fn.load

原因是在jQuery 3.x 中取消了 load()，将 $(window).load(function () { 替换为 $(window).on('load',function(){ 即可，如：

$(window).on('load',function(){$(".loaderbg").hide();});

同时考虑到如果用户的浏览器侧不支持JavaScript或者JavaScript被禁用，需要使用noscript标签，添加display:none属性即可，noscript只会在浏览器环境不支持JS或者JS被禁用才会执行

<noscript><style>.loaderbg {display: none;}</style>
</noscript>

4.实例代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏_阿峰博客</title><script src="https://libs.afengim.com/libs/jquery-3.1.1/jquery-3.1.1.min.js" type="application/javascript"></script><style>.loaderbg {background-color: #fff;width: 100%;height: 100%;overflow: hidden;position: fixed;left: 0;top: 0;z-index: 99999999}::-webkit-scrollbar {width: 7.5px;height: 6px;background-color: #f0f0f0;display: none}::-webkit-scrollbar-thumb {background-color: #b1b1b1;border-radius: 15px}::-webkit-scrollbar-thumb:hover {background-color: #777}.spinner {position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -30px;width: 50px;height: 60px;text-align: center;font-size: 10px}.spinner > .double {background: #49a9ee;height: 100%;width: 6px;display: inline-block;-webkit-animation: stretchDelay 1.2s infinite ease-in-out;animation: stretchDelay 1.2s infinite ease-in-out}.spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s}.spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s}.spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s}.spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s}@-webkit-keyframes stretchDelay {0%,40%,100% {-webkit-transform: scaleY(.4)}20% {-webkit-transform: scaleY(1)}}@keyframes stretchDelay {0%,40%,100% {transform: scaleY(.4);-webkit-transform: scaleY(.4)}20% {transform: scaleY(1);-webkit-transform: scaleY(1)}}</style>
</head>
<body>
<!--html-->
<div class="loaderbg"><div class="spinner"><div class="double rect1"></div><div class="double rect2"></div><div class="double rect3"></div><div class="double rect4"></div><div class="double rect5"></div></div>
</div>
<!--end-->
<p><a href="https://www.afengblog.com/website-loading.html" target="_blank"><strong>使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏，地址：https://www.afengblog.com/website-loading.html</strong></a>
</p>
<!--noscript-->
<noscript><style>.loaderbg {display: none;}</style>
</noscript>
<!--end-->
<!--script-->
<script type="text/javascript">//页面加载完成之后隐藏loading/*$(window).load(function () {$(".loaderbg").hide();});*///设置页面加载3秒之后隐藏loading$(function () {setTimeout(function () {$(".loaderbg").hide();alert("页面加载完成啦！");}, 3000);})
</script>
<!--end-->
</body>
</html>

Demo地址：使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏_阿峰博客

原文地址：使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏 - 阿峰博客