< div class = " p" >
< p class = " bounce" >
< template v-if = " loadType == ' loading' " >
< template v-for = " (item,index) in loadText" > < span class = " letter" :key = " index" > {{item}}</ span> </ template>
</ template>
</ p>
</ div>
data ( ) {
return {
loadText: [ '正' , '在' , '同' , '步' , '中' , '请' , '稍' , '候' , '·' , '·' , '·' ] ,
loadType: 'loading'
}
} ,
.bounce {
display : flex;
align-items : center;
justify-content : center;
width : 100%;
color : #000;
height : 100%;
white-space : nowrap;
}
.letter {
animation : bounce 0.75s cubic-bezier ( 0.05, 0, 0.2, 1) infinite alternate;
display : inline-block;
transform : translate3d ( 0, 0, 0) ;
margin-top : 0.5em;
text-shadow : rgba ( 255, 255, 255, 0.4) 0 0 0.05em;
font : normal 500 20px 'Varela Round' , sans-serif;
}
.letter:nth-child(1) {
animation-delay : 0s;
}
.letter:nth-child(2) {
animation-delay : 0.1s;
}
.letter:nth-child(3) {
animation-delay : 0.2s;
}
.letter:nth-child(4) {
animation-delay : 0.3s;
}
.letter:nth-child(5) {
animation-delay : 0.4s;
}
.letter:nth-child(6) {
animation-delay : 0.5s;
}
.letter:nth-child(7) {
animation-delay : 0.6s;
}
.letter:nth-child(8) {
animation-delay : 0.7s;
}
.letter:nth-child(9) {
animation-delay : 0.8s;
}
.letter:nth-child(10) {
animation-delay : 0.9s;
}
.letter:nth-child(11) {
animation-delay : 1s;
}
@keyframes bounce {
0% {
transform : translate3d ( 0, 0, 0) ;
text-shadow : rgba ( 255, 255, 255, 0.4) 0 0 0.05em;
}
100% {
transform : translate3d ( 0, -1em, 0) ;
text-shadow : rgba ( 255, 255, 255, 0.4) 0 1em 0.35em;
}
}