jq loading 动画插件

jq loading 动画插件，基于Jq,bootstrap 的loading,我这里也是网站上下载的插件，个人认为比较好看的一个demo,

注意，jq 插件必须是2.0 以上的版本，自己可以去官网下载 https://jquery.com/download/

html

<div id="loading">
		<div id="loading-center">
			<div id="loading-center-absolute">
				<div class="object" id="object_one"></div>
				<div class="object" id="object_two"></div>
				<div class="object" id="object_three"></div>
			</div>
		</div>
	</div>

css,最主要靠css 来实现动画的

<style>
	#loading{
		background-color: white	;
		height: 100%;
		 100%;
		position: fixed;
		z-index: 1;
		margin-top: 0px;
		top: 0px;
	}
	#loading-center{
		 100%;
		height: 100%;
		position: relative;
	}
	#loading-center-absolute {
		position: absolute;
		left: 50%;
		top: 50%;
		height: 150px;
		 150px;
		margin-top: -75px;
		margin-left: -75px;
	}
	.object{
		 20px;
		height: 20px;
		background-color: #f53e6a;
		float: left;
		margin-right: 20px;
		margin-top: 65px;
		-moz-border-radius: 50% 50% 50% 50%;
		-webkit-border-radius: 50% 50% 50% 50%;
		border-radius: 50% 50% 50% 50%;
	}

	#object_one {	
		-webkit-animation: object_one 1.5s infinite;
		animation: object_one 1.5s infinite;
		}
	#object_two {
		-webkit-animation: object_two 1.5s infinite;
		animation: object_two 1.5s infinite;
		-webkit-animation-delay: 0.25s; 
	    animation-delay: 0.25s;
		}
	#object_three {
	    -webkit-animation: object_three 1.5s infinite;
		animation: object_three 1.5s infinite;
		-webkit-animation-delay: 0.5s;
	    animation-delay: 0.5s;	
		}
	@-webkit-keyframes object_one {
	75% { -webkit-transform: scale(0); }
	}
	@keyframes object_one {

	  75% { 
	    transform: scale(0);
	    -webkit-transform: scale(0);
	  }
	}
	@-webkit-keyframes object_two {
	  75% { -webkit-transform: scale(0); }
	}
	@keyframes object_two {
	  75% { 
	    transform: scale(0);
	    -webkit-transform:  scale(0);
	  }
	}
	@-webkit-keyframes object_three {

	  75% { -webkit-transform: scale(0); }
	}
	@keyframes object_three {

	  75% { 
	    transform: scale(0);
	    -webkit-transform: scale(0);
	  } 
	}
	</style>

js 调用,在公共地方中写入loading,每个页面进入的时候都会出现改loading

$(window).load(function() {
	//$("#loading").delay(2000).fadeOut(500);
	$("#loading-center").click(function() {
	$("#loading").fadeOut(500);
	})
})

效果 这里只是png 的图片，效果，可吧代码复制运行即可