vue——loading组件

<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>