HTML+CSS写Loading图

用HTML和CSS写上方Loading图中的动画，已测试兼容最新的谷歌、火狐、ie等浏览器

常见的谷歌浏览器和Safari浏览器的前缀为 -webkit-
火狐浏览器（Firefox）的前缀为 -moz-
Opera浏览器的前缀为 -o-
IE浏览器的前缀为 -ms-

HTML代码

<div class="main">
	<div class="loading1">
		<span class="span1"></span>
	</div>
	<div class="loading2">
		<span class="span2"></span>
	</div>
</div>

CSS代码

.main{
	width: 100%;
	height: auto;
	padding-top: 100px;
}
.loading1{
	width: 30px;
	height: 8px;
	border-radius: 4px;
	margin: 0 auto;
	margin-top:100px;
	position: relative;
	background: #49a9e4;
	overflow: hidden;
}
.loading1 .span1{
	display:block;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background: #420274;
	-webkit-animation: changePosition 4s linear infinite;  /* for Chrome || Safari */
	-ms-animation: changePosition 4s linear infinite;      /* for IE */
}
.loading2{
	width: 30px;
	height: 8px;
	border-radius: 4px;
	margin: 0 auto;
	margin-top:-20px;
	position: relative;
}
.loading2 .span2{
	display:block;
	width: 28px;
	height: 28px;
	border: 2px solid #e6bfd4;
	border-radius: 15px;
	-webkit-animation: changePosition 4s linear infinite;
	-ms-animation: changePosition 4s linear infinite;
}
@-webkit-keyframes changePosition{     		/* for Chrome || Safari */
	0%{
		-webkit-transform: translate(-30px);
	}
	25%{
		-webkit-transform: translate(0);
	}
	50%{
		-webkit-transform: translate(30px);
	}
	75%{
		-webkit-transform: translate(0);
	}
	100%{
		-webkit-transform: translate(-30px);
	}
	
}
@-ms-keyframes changePosition{				 /* for IE */
	0%{
		-ms-transform: translate(-30px);
	}
	25%{
		-ms-transform: translate(0);
	}
	50%{
		-ms-transform: translate(30px);
	}
	75%{
		-ms-transform: translate(0);
	}
	100%{
		-ms-transform: translate(-30px);
	}
}