animation渐进实现点点点等待效果实例页面

.ani_dot {
font-family: simsun;
}
:root .ani_dot {
display: inline-block;
width: 1.5em;
vertical-align: bottom;
overflow: hidden;
}
@-webkit-keyframes dot {
0% { width: 0; margin-right: 1.5em; }
33% { width: .5em; margin-right: 1em; }
66% { width: 1em; margin-right: .5em; }
100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
-webkit-animation: dot 3s infinite step-start;
}

@keyframes dot {
0% { width: 0; margin-right: 1.5em; }
33% { width: .5em; margin-right: 1em; }
66% { width: 1em; margin-right: .5em; }
100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
animation: dot 3s infinite step-start;
}

<a href="javascript:" id="submit" class="grebtn">提交订单</a>

$("#submit").bind("click", function() {
if (!this.ajaxing) {
this.ajaxing = true;
this.innerHTML = '提交订单中<span class="ani_dot">...</span>';
setTimeout(function() {
this.ajaxing = false;
this.innerHTML = "提交超时";
}.bind(this), 30000);
}
});