css3 loading 几种写法

用到CSS3,所以忽略IE9及以下的东西

使用box-shadow,上代码

.loading {
width: 2px;
height: 2px;
border-radius: 100%;
font-size: 6px;
box-shadow: 0 -1em 0 0.1em #fff, 1em 0 #fff, 0 1em #fff, -1em 0 #fff, -0.7em -0.7em 0 0.05em #fff, 0.7em -0.7em 0 0.15em #fff, 0.7em 0.7em #fff, -0.7em 0.7em #fff;
display: inline-block;
vertical-align: middle;
}
.spin {
animation: spin 1s steps(8) infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.btn {
background: #00a3ee;
width: 100px;
height: 24px;
line-height: 24px;
border-radius: 3px;
display: block;
float: left;
text-align: center;
font-size: 12px;
}

.btn span.title {
padding-right: 10px;
}

<a class=”btn” href=””><span class=”title”>提交订单</span><span class=”loading spin”></span></a>

使用content,上代码

dot {
display: inline-block;
height: 1em;
line-height: 1;
vertical-align: -.25em;
overflow: hidden;
}

dot::before {
display: block;
content: ‘…\A..\A.’;
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}

@keyframes dot {
33% {
transform: translateY(-1em);
}
66% {
transform: translateY(-2em);
}

}

<a href=”javascript:” class=”grebtn”>订单提交中<dot></dot></a>