animation渐进实现点点点等待效果

<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>

原文地址：https://www.cnblogs.com/NatChen/p/9056093.html