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

CSS代码：

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

HTML代码：

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

JS代码：

$("#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); } });