基于css的简单loading效果

效果图

简单loading效果，可直接在页面加载时，调用css，兼容已完善大小颜色修改即可

<div class="loading"></div>

css

.loading {
	margin:100px auto;
	width:100px;
	height:100px;
	border:10px solid #333333;
	border-bottom:#aaa 10px solid;
	border-radius:50%;
	animation:load 1.1s infinite linear;
	-webkit-animation:load 1.1s infinite linear;
	-moz-animation:load 1.1s infinite linear;
	-o-animation:load 1.1s infinite linear;
}
@keyframes load {
	from {
	transform:rotate(0deg);
	-ms-transform:rotate(0deg);
}
to {
	transform:rotate(360deg);
	-ms-transform:rotate(360deg);
}
}@-webkit-keyframes load {
	from {
	-webkit-transform:rotate(0deg);
}
to {
	-webkit-transform:rotate(360deg);
}
}@-moz-keyframes load {
	from {
	-moz-transform:rotate(0deg);
}
to {
	-moz-transform:rotate(360deg);
}
}@-o-keyframes load {
	from {
	-o-transform:rotate(0deg);
}
to {
	-o-transform:rotate(360deg);
}
}