在vue中使用loading组件 CSS3实现loading效果
1、创建一个Loading.vue
html
JS
CSS
<style scoped>
.loading {
text-align: center;
}
.loading-icon {
position: relative;
width: 50px;
height: 50px;
margin: 0 auto;
}
.demo {
width: 4px;
height: 4px;
border-radius: 2px;
background: #d4ba6a;
position: absolute;
animation: demo linear 0.8s infinite;
-webkit-animation: demo linear 0.8s infinite;
}
.demo:nth-child(1){
left: 24px;
top: 2px;
animation-delay:0s;
}
.demo:nth-child(2){
left: 40px;
top: 8px;
animation-delay:0.1s;
}
.demo:nth-child(3){
left: 47px;
top: 24px;
animation-delay:0.1s;
}
.demo:nth-child(4){
left: 40px;
top: 40px;
animation-delay:0.2s;
}
.demo:nth-child(5){
left: 24px;
top: 47px;
animation-delay:0.4s;
}
.demo:nth-child(6){
left: 8px;
top: 40px;
animation-delay:0.5s;
}
.demo:nth-child(7){
left: 2px;
top: 24px;
animation-delay:0.6s;
}
.demo:nth-child(8){
left: 8px;
top: 8px;
animation-delay:0.7s;
}
@keyframes demo {
0%,40%,100% {transform: scale(1);}
20% {transform: scale(3);}
}
@-webkit-keyframes demo {
0%,40%,100% {transform: scale(1);}
20% {transform: scale(3);}
}
.text {
color: #999;
margin-top: 12px;
font-size: 14px;
}
</style>
2、在父组件中使用Loading组件
其中使用 v-if="!playList.length" ，是数据playList没加载之前，表示这块数据没有加载前，显示Loading；数据加载之后，不显示。
