<template>
<div class="loading" :style="{height:loadingRadiusVal+'px',width:loadingRadiusVal+'px'}">
<div v-for="(dotNum, index) in dotNums" :key="index" :style="dotTransform(index, dotNums)">
<span :style="dotAimation(index, dotNums)"></span>
</div>
</div>
</template>
js
<script>
export default{
props:{
loadingRadiusVal: { type: Number, default: 100 },
dotRadiusVal: { type: Number, default: 20 },
dotColorVal: { type: String, default: '#f00' },
dotNums: { type: Number, default: 10 }
},
data(){
return{ }
},
methods:{
dotTransform(idx,dotNums){
let rad = 2 * Math.PI / dotNums * idx;
let dotX = Math.cos(rad) * (this.loadingRadiusVal / 2);
let dotY = Math.sin(rad) * (this.loadingRadiusVal / 2);
return { transform: `translate(${dotX}px,${dotY}px)`,height: this.dotRadiusVal+'px',width:this.dotRadiusVal+'px'};
},
dotAimation(idx,dotNums){
let delayTime = `${-1*(1+idx)*1/dotNums}s`;
return{
animationDelay:delayTime,
background:this.dotColorVal
}
}
}
}
</script>
css
<style>
div.loading{
position: relative;
margin: 0 auto;
font-size:;
border-radius: 50%;
transform-origin: 50%;
}
div.loading div{
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
}
span{
display: block;
border-radius: 50%;
width: 100%;
height: 100%;
animation: ball 1s infinite ease-in-out;
}
@keyframes ball{
0%{
opacity:;
transform: scale(1);
}
20%{
opacity:;
}
80%{
opacity:;
transform: scale(0);
}
}
</style>