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