demo:http://jsbin.com/hacadobo/1/edit

code:https://gist.github.com/hoosin/ff27ca3e1c0926c0054b

<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>

.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;
}