<div id="app">
<div class="loading">
<h2>玩命加载中...</h2>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
CSS:
.loading {
text-align: center;
padding-top: 10%;
display: block;
}
/*
* Loading Dots
* Can we use pseudo elements here instead :after?
*/
.loading span {
display: inline-block;
vertical-align: middle;
width: .6em;
height: .6em;
margin: .19em;
background: #007DB6;
border-radius: .6em;
-webkit-animation: loading 1s infinite alternate;
-moz-animation: loading 1s infinite alternate;
-o-animation: loading 1s infinite alternate;
-ms-animation: loading 1s infinite alternate;
animation: loading 1s infinite alternate;
}
/*
* Dots Colors
* Smarter targeting vs nth-of-type?
*/
.loading span:nth-of-type(2) {
background: #008FB2;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
background: #009B9E;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
background: #00A77D;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-ms-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
background: #00B247;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-ms-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.loading span:nth-of-type(6) {
background: #5AB027;
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
-o-animation-delay: 1.0s;
-ms-animation-delay: 1.0s;
animation-delay: 1.0s;
}
.loading span:nth-of-type(7) {
background: #A0B61E;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
animation-delay: 1.2s;
}
/*
* Animation keyframes
* Use transition opacity instead of keyframes?
*/
@-webkit-keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}