animation渐进实现点点点等待效果
Posted NatChen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于animation渐进实现点点点等待效果的主要内容，如果未能解决你的问题，请参考以下文章