vue数据加载等待组件

<template>
<div class="loading">
<div class="mock">数据加载中</div>
<div class="loader-inner ball-pulse">
<div></div>
<div></div>
<div></div>
</div>
</div>
</template>
<script>
export default {
data(){
return{ }
}
};
</script><style scoped>
.loading{
position: fixed;
top: ;
left: ;
right: ;
bottom: ;
z-index:;
width: %;
height: %;
background-color: #ffffff;
opacity: 0.6;
}
.loading .mock{
height: 30px;
position: absolute;
top: %;
left: %;
transform: translateX(-%);
font-size: 25px;/*px*/
color: #03a9f4;
/*text-align: center;*/
line-height: 30px;
}
.ball-pulse{
position: absolute;
top: %;
left: %;
transform: translateX(-%);
}
.loading .ball-pulse div{
background-color: #03a9f4;
width: 30px;
height: 30px;
border-radius: %;
margin: 2px;
animation-fill-mode: both;
display: inline-block;
}
.loading .ball-pulse div:nth-child(){
animation: scale .75s -.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.loading .ball-pulse div:nth-child(){
animation: scale .75s -.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
}
.loading .ball-pulse div:nth-child(){
animation: scale .75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)
}@-webkit-keyframes scale {
% {
-webkit-transform: scale();
transform: scale();
opacity: ;
}
% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
% {
-webkit-transform: scale();
transform: scale();
opacity: ;
}
}
@keyframes scale {
% {
-webkit-transform: scale();
transform: scale();
opacity: ;
}
% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7;
}
% {
-webkit-transform: scale();
transform: scale();
opacity: ;
}
}
</style>