制作一个页面载入loading加载完毕动画收缩

粗糙的制作一个loading加载完用CSS动画方式结束

HTML部分：

<div id="XGloader">
	<div class="XGloader_Bg"></div>
	<div class="XGloader">
		<div class="XGloader_img"></div>
		<div class="XGloader_txt">加载中，请稍候...</div>
	</div>
</div>

 

CSS部分：

#XGloader{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #33a4f3;
	width: 100vw;
	height: 100vh;
	position: relative;
	z-index: 999;
}
.XGloader_Bg{
	background: #33a4f3;
	border-radius: 50%;
	z-index: 9999;
}
.XGloader{z-index: 99999;}
#XGloader .XGloader_img{
	background: url('../img/xg.gif');
	background-size: 100%;
}
@media (max-width:9999px){
	#XGloader .XGloader_Bg{
		width: 150px;
		height: 150px;
	}
	#XGloader .XGloader{margin-top: -200px;}
	#XGloader .XGloader_img{
		width: 200px;
		height: 200px;
	}
	#XGloader .XGloader_txt{
		color: #fff;
		font-size: 26px;
	}
} @media (max-width:1024px){
	#XGloader .XGloader_Bg{
		width: 100px;
		height: 100px;
	}
	#XGloader .XGloader{margin-top: -140px;}
	#XGloader .XGloader_img{
		width: 140px;
		height: 140px;
	}
	#XGloader .XGloader_txt{
		color: #fff;
		font-size: 20px;
	}
}
@keyframes XGloaderAnima{
	0% {
		transform: scale(100); /*开始放大100倍*/
	}
	100% {
		transform: scale(1); /*结束原始尺寸*/
	}
}

 

JS部分：

document.onreadystatechange = function() {
	if (document.readyState !== "complete") {
		// 加载中
		document.querySelector("body").style.visibility = "hidden";
		document.querySelector("#XGloader").style.visibility = "visible";
	} else {
		// 加载完成
		document.querySelector("#XGloader").style.background = "transparent";//背景透明掉
		setTimeout(function () {//持续0.8秒
			document.querySelector(".XGloader").style.display = "none";//隐藏掉loading图标
		}, 800); //持续0.8秒 end
		document.querySelector(".XGloader_Bg").style.animationName = "XGloaderAnima";//关键帧名称
		document.querySelector(".XGloader_Bg").style.animationIterationCount = 1;//动画播放的次数
		document.querySelector(".XGloader_Bg").style.animationDuration = "1s";//动画所花费的时间
		setTimeout(function () {//持续1秒
			document.querySelector("#XGloader").style.display = "none";//隐藏整个loading
		}, 1000); //持续1秒 end
		document.querySelector("body").style.visibility = "visible";//显示页面
	}
}

 

 

运行DEMO