页面加载动画的实现

记录自己做过的一些简单常用效果
解决方案：
1 . 自己先写一个加载动画
元素如下

<div class="loading">
	<div class="load_img">
		<img class="img1" src="./images/img1.png">
		<img class="img2" src="./images/img2.png">
	</div>
</div>

样式如下

	.loading {
			position: fixed;
			width: 100vw;
			height: 100vh;
			background-color: black;
		}
		.loading img{
				position:fixed;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin:  auto;
				    z-index: 99999999999;
				width: 20wv;
				height: 20vh;
		}
	.load_img .img1{animation:img1 8s infinite linear;}
		@keyframes img1 {
		  from {
		  transform:rotate(0deg);
		  }
		  50% {
		    transform:rotate(180deg);
		  }
		  to{
		  	transform:rotate(360deg);
		  }
		}	
	
	.load_img .img2{animation:img2 7s infinite linear;}
			@keyframes img2 {
			  from {
			  transform:rotate(0deg);
			  }
			  50% {
			    transform:rotate(-180deg);
			  }
			  to{
			  	transform:rotate(-360deg);
			  }
			}

这样一来无论你的屏幕多大多高，这个加载都会全屏占据你的屏幕。

最后最简单得方法（必须先src jQuery.js）
页面一打开就执行：

$(document).ready(function(){ 
		$(".loading").show()
})	
页面所有资源加载完毕后执行
$(window).load(function(){
	$(".loading").toggle()
});

效果如下图。 中间那个蓝色图片会转圈圈，具体图片可以自行调整。等页面内容加载完毕即可。