<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>http://www.zhangxinxu.com/wordpress/2014/12/css3-animation-dotting-loading/</title>
<style>
.grebtn{
display: inline-block;
padding: 0.25em 1.25em;
border: 1px solid;
border-radius: 2px;
vertical-align: bottom;
font-weight: inherit;
border-color: #208000 #1F7F00;
background-color: #289600;
box-shadow: inset 0 0 1px rgba(255,255,255,.6), 0 1px #8DBF62;
color: #fff;
text-shadow: 0 -1px #137900;
text-decoration: none;
}
.dotting {
display: inline-block; 10px; min-height: 2px;
padding-right: 2px;
border-left: 2px solid currentColor; border-right: 2px solid currentColor;
background-color: currentColor; background-clip: content-box;
box-sizing: border-box;
-webkit-animation: dot 4s infinite step-start both;
animation: dot 4s infinite step-start both;
*zoom: expression(this.innerHTML = '...'); /* IE7 */
}
.dotting:before { content: '...'; } /* IE8 */
.dotting::before { content: ''; }
:root .dotting { margin-left: 2px; padding-left: 2px; } /* IE9+ */
@-webkit-keyframes dot {
25% { border-color: transparent; background-color: transparent; }
50% { border-right-color: transparent; background-color: transparent; }
75% { border-right-color: transparent; }
}
@keyframes dot {
25% { border-color: transparent; background-color: transparent; }
50% { border-right-color: transparent; background-color: transparent; }
75% { border-right-color: transparent; }
}
</style>
</head>
<body>
<a href="javascript:" class="grebtn">订单提交中<span class="dotting"></span></a>
</body>
</html>