CSS code:
. Ani_dot{Font-family: SimSun;}: Root. Ani_dot{Display: Inline-block;Width:1.5EmVertical-align: Bottom;Overflow: Hidden;}@-webkit-keyframes Dot{0%{Width: 0;Margin-right:1.5Em}33%{Width:.5EmMargin-right:1Em}66%{Width:1EmMargin-right:.5Em}100%{Width:1.5EmMargin-right: 0;}}. Ani_dot{-webkit-animation: Dot 3s infinite step-start;}@keyframes Dot{0%{Width: 0;Margin-right:1.5Em}33%{Width:.5EmMargin-right:1Em}66%{Width1EM; margin-right: .5EM; } 100% {width: 1.5EM; margin-right: 0;} }.ani_dot {animation: Dot 3s infinite Step-start; } /span>
HTML code:
<href="javascript:id=" Submitclass="grebtn"> Submit Order </a>
JS Code:
$("#submit").Bind(The Click",function(){If(!This.Ajaxing){This.Ajaxing=TrueThis.InnerHTML=' Submit order in <span class= ' Ani_dot ' >...</span>'; setTimeout(function() {this . Ajaxing = false; This . InnerHTML = "commit timeout "; }. bind(this), 30000); }});
Animation progressive implementation Point-to-point wait effect instance page