【HTML】简单实现⽹页加载动画
效果：
进⼊⽹页时先出现加载动画，加载完毕后显⽰⽹页
实现原理：
在html上⽅放⼀个div，⽤来显⽰加载动画，js判断加载完毕事件，将div隐藏即可。
知识点整理：
伪元素实现垂直居中、awesome字体动画、js判断HTML加载是否完成
代码：
css:
body {
width: 100%;
height: 100%;注册页面js特效
overflow: hidden;
}
.loading-div {
width: 1800px;
height: 720px;
background-color: #fff;
display: table-cell;
vertical-align: middle;
color: #555;
overflow: hidden;
text-align: center;
}
.loading-div::before {
display: inline-block;
vertical-align: middle;
}
html
<div class="loading-div">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw "></i>
<span class="sr-only"&</span>
</div>
<div class="main">
这⾥是⽹页内容
</div>
js
//注释部分是设置2秒的定时延迟，timeout结束后加载⽹页
//setTimeout(() => {
// $(".loading-div").hide();
//$('body').css('overflow-y','scroll');
// }, 2000);
//这是根据js判断，页⾯加载完毕就显⽰
if (adyState == "complete") {
$(".loading-div").hide();
$('body').css('overflow','scroll');
}
}
在线引⽤⽂件：
<script src="apps.bdimg/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="cdn.jsdelivr/npm/font-awesome/css/font-awesome.min.css" rel="stylesheet">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。