通过CSS实现GitHub的Loading效果

index.html

<div class="loading-msg">
	数据加载中请稍后
	<div class="loading-box">
		<div class="loading" index="0"></div>
		<div class="loading" index="1"></div>
		<div class="loading" index="2"></div>
		<div class="loading" index="3"></div>
		<div class="loading" index="4"></div>
	</div>
</div>

style.css

.loading-msg{color: red; font:normal 24px/50px "Microsoft YaHei"; text-align: center; background: #fff; width: 1000px; margin: 0 auto; }

.loading-box{position:relative; padding: 10px 5px 30px 5px; }

 @keyframes loading {
	0% {
		left: 0;
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

@-webkit-keyframes loading {
	0% {
		left: 0;
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

@-moz-keyframes loading {
	0% {
		left: 0;
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

@-o-keyframes loading {
	0% {
		left: 0;
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

.loading {
	width: 5px;
	height: 5px;
	background: red;
	position: absolute;
	opacity: 0;
	animation: loading 2s;
	-moz-animation: loading 2s;
	-webkit-animation: loading 2s;
	-o-animation: loading 2s;
	animation-timing-function: cubic-bezier(0.1, 0.48, 0.9, 0.52);
	-webkit-animation-timing-function: cubic-bezier(0.1, 0.48, 0.9, 0.52);
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.loading[index="0"] {
	animation-delay: 0.15s;
	-webkit-animation-delay: 0.15s;
}

.loading[index="1"] {
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}

.loading[index="2"] {
	animation-delay: 0.45s;
	-webkit-animation-delay: 0.45s;
}

.loading[index="3"] {
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}

.loading[index="4"] {
	animation-delay: 0.75s;
	-webkit-animation-delay: 0.75s;
}




 

good