<style>
@keyframes dot {
0% { width: 0; }
33% { width: .2em; }
66% { width: .5em; }
100% { width: .8em; }
}
.dot {
display: inline-block;
width: 20px;
vertical-align: bottom;
overflow: hidden;
-webkit-animation: dot 3s infinite step-start;
}
</style>
<button>提交</button>
<script src="jquery-2.1.1.min.js"></script>
<script>
$("button").click(function(){
$(this).html("处理中<span class='dot'>...<span>")
setTimeout(function(){
alert("网络慢...")
},10000)
})
</script>