<p><p><p>
<style type="text/css">
.main-loading 
{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background:#fff;
	z-index:99
}
.main-loading .loading-con 
{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-40px;
	margin-top:-40px;
	width:96px;
	height:96px
}
.main-loading .loading-con img 
{
	position:absolute;
	top:8px;
	left:8px;
	width:80px;
	height:80px;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	-ms-border-radius:50%;
	border-radius:50%
}
.main-loading .loading-circle 
{
	width:80px;
	height:80px;
	border-top:8px solid #11994b;
	border-right:8px solid #f2a808;
	border-bottom:8px solid #2399e7;
	border-left:8px solid #c0392b;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	-ms-border-radius:50%;
	border-radius:50%;
	-webkit-animation:spin 1s infinite linear;
	-moz-animation:spin 1s infinite linear;
	-o-animation:spin 1s infinitelinear;
	-ms-animation:spin 1s infinite linear;
	animation:spin 1s infinite linear
}
</style>

<script src=" http://jquery.cuishifeng.cn/js/jquery-2.1.3.js"></script>
<script src="http://jquery.cuishifeng.cn/js/jquery.autocomplete.js"></script>
<script src="http://demo.lanrenzhijia.com/2014/rotate0410/js/jquery.rotate.min.js"></script>

<script type="text/javascript">
    	$(document).ready(function()
    		{
    			var angle = 0;
				setInterval(function()
				{
				      angle+=4;
				     $(".loading-circle").rotate(angle);
				},8);
    		});
</script>

<div class="main-loading" id="main-loading" >
	<div class="loading-con">
		<div class="loading-circle"></div>
		<img src="http://jquery.cuishifeng.cn/images/head.jpg" title="jquery api" alt="jquery api">
	</div>
</div>
<p><p><p>