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>