在提交订单时，为了让用户体验更好，一般改成正在提交，后面加三个点，为了让页面更生动，可以把点点改成动态

提交订单中<span class="ani_dot">...</span>

.ani_dot {
    font-family: simsun;    
}
:root .ani_dot { /* 这里使用Hack是因为IE6~IE8浏览器下， vertical-align解析不规范，值为bottom或其他会改变按钮的实际高度*/
    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;
}

 由上面想到加载问题，以下DEOM中三个按钮，第一个按钮模拟超时；第二个为请求小图片（快速loading效果）；第三个为请求大图片（缓慢请求loading效果，明显进度条效果）。

.ani_prog {
    position: relative;    
}
.ani_prog::before, .ani_prog::after {
    content: '';
    height: 8px;
    position: absolute; left: 0; right: 0; top: -15px;
}
.ani_prog::before{
    background-color: #ddd;
}
.ani_prog::after {
    padding-right: 0%;
    background-color: #34538b;
    background-clip: content-box;
    box-sizing: border-box;
    animation: progress 30s;
}
/* 等待结束直接到底显示 */
.ani_prog_finish::after {
    animation: none;
}

@keyframes progress {
   0%   { padding-right: 100%; } 
   1%   { padding-right: 50%; } 
   3%   { padding-right: 30%; } 
   10%  { padding-right: 20%; } 
   20%  { padding-right: 8%; } 
   30%  { padding-right: 5%; } 
   40%  { padding-right: 4%; } 
   60%  { padding-right: 2%; } 
   80%  { padding-right: 1%; }   
}}

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

<a href="javascript:" name="request" class="grebtn" data-url="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">请求小图</a>

<a href="javascript:" name="request" class="grebtn" data-url="http://ww4.sinaimg.cn/bmiddle/79a00895jw1e5lsnfbbt3g207g0434qq.gif">请求大图</a>

$("#submit").bind("click", function() {
    if (!this.ajaxing) {
        this.ajaxing = true;
        this.innerHTML = '提交订单中...';
        this.className += " ani_prog";
        setTimeout(function() {
            this.ajaxing = false;            
            this.className = "grebtn";
            this.innerHTML = "提交超时";
        }.bind(this), 30000);
    }
});

$("#request").bind("click", function() {
    var src = $(this).attr("data-url"), myImg = null;  
    if (this.loading !== true) {
        src = src + "?r=" + Date.now();
        myImg = new Image();
        // 状态变化
        this.loading = true;
        this.innerHTML = '图片请求中...';
        this.className += " ani_prog";
        myImg.onload = function() {
            // 重要一环，动画直接结束
            this.className += " ani_prog_finish";
            // 小小定时器，两次渲染
            setTimeout(function() {
                this.insertAdjacentHTML("afterend", '<br><br><img src="'+ src +'">');
                this.className = "grebtn";
                this.innerHTML = '图片请求成功';
            }.bind(this), 16);            
        }.bind(this);
        myImg.src = src;
    }
    return false;    
});