CSS - 实现Loading加载动画

Loading加载动画
用CSS都用实现一个loading的加载动画
通过控制 item-loader-container 来实现显示及隐藏

---

	<div class="item-loader-container" id="item-loader-container">
	    <div class="la-ball-running-dots la-2x">
	        <div></div><div></div><div></div><div></div><div></div>
	    </div>
	</div>
	<style>
		.item-loader-container{
			position: absolute;left: 42%;top: 52%;opacity: .7;
		}
	    .item-loader-container div {
	    	-webkit-animation-play-state: paused;
	    	-moz-animation-play-state: paused;
	    	-o-animation-play-state: paused;
	    	animation-play-state: paused;
	    }
	    .la-ball-elastic-dots { 
	    	width: 120px;height: 10px;
	    	font-size: 0;text-align: center;
	    }
	    .la-ball-elastic-dots, .la-ball-elastic-dots>div { 
	    	position: relative;-webkit-box-sizing: border-box;
	    	-moz-box-sizing: border-box;box-sizing: border-box;
	    }
	    .la-ball-elastic-dots.la-2x {
	    	color: #6f6f70;opacity: .8;font-size: 3px;
	    	width: 186px;height: 15px;
	    }
	    .la-ball-elastic-dots.la-2x>div {
	    	width: 15px;height: 15px;
	    }
	    .la-ball-elastic-dots>div {
	    	display: inline-block;width: 10px;height: 10px;
	    	white-space: nowrap;border-radius: 100%;
	    	-webkit-animation: ball-elastic-dots-anim 1s infinite;
	    	-moz-animation: ball-elastic-dots-anim 1s infinite;
	    	-o-animation: ball-elastic-dots-anim 1s infinite;
	    	animation: ball-elastic-dots-anim 1s infinite;
	    }
	    .la-ball-elastic-dots>div {
	    	display: inline-block;float: none;
	    	background-color: currentColor;
	    	border: 0 solid currentColor;
	    }
	    @keyframes ball-elastic-dots-anim {
	        0%, 100% {
	        	-webkit-transform: scale(1);-moz-transform: scale(1);
	        	-o-transform: scale(1);transform: scale(1);margin: 0;
	        }
	        50% {
	        	-webkit-transform: scale(0.65);-moz-transform: scale(0.65);
	        	-o-transform: scale(0.65);transform: scale(0.65);margin: 0 5%;
	        }
		</style>

---

PS：当然也可以使用GIF图，做加载过度 例如：