js实现顺时针加载点动画

效果图如下

用了比较笨的方法settimeout，实现的

1、有一个dom，用背景图片

2、分别定义了五个点测试

3、js定义了一个函数用来每个一秒增加一个点显示

4、显示完成之后，隐藏所有的点

timeDo() {
            for (let i = 1; i <= 5; i++) {
                setTimeout(() => {
                    let dom = document.querySelector(`#dot${i}`)
                    dom.style.display = 'block'
                }, 1000 * i);
            }
            setTimeout(() => {
                for (let i = 1; i <= 5; i++) {
                    let dom = document.querySelector(`#dot${i}`)
                    dom.style.display = 'none'
                }
            }, 6000);
        }

5、定义一个计时器，重复显示

this.interval = setInterval(() => {
                console.log(123);
                this.timeDo()
            }, 6000)

完整代码

<template>
    <div class="container">
        <!-- 24个 -->
        <span id="dot1" style="display: none;"></span>
        <span id="dot2" style="display: none;"></span>
        <span id="dot3" style="display: none;"></span>
        <span id="dot4" style="display: none;"></span>
        <span id="dot5" style="display: none;"></span>
    </div>
</template>
<script>
export default {
    data() {
        return {
            interval: null
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.timeDo()
            this.interval = setInterval(() => {
                console.log(123);
                this.timeDo()
            }, 6000)
        },
        timeDo() {
            for (let i = 1; i <= 5; i++) {
                setTimeout(() => {
                    let dom = document.querySelector(`#dot${i}`)
                    dom.style.display = 'block'
                }, 1000 * i);
            }
            setTimeout(() => {
                for (let i = 1; i <= 5; i++) {
                    let dom = document.querySelector(`#dot${i}`)
                    dom.style.display = 'none'
                }
            }, 6000);
        }
    },
    destroyed() {
        if(this.interval) {
            clearInterval(this.interval)
        }
        this.interval = null
    }
}
</script>
<style lang="less" scoped>
.container {
    width: 532px;
    height: 532px;
    background: url('@/assets/circle_1.png') no-repeat center;
    position: relative;

    #dot1 {
        width: 28px;
        height: 38px;
        position: absolute;
        left: 250px;
        top: 410px;
        background-color: #15DBFF;
        border-radius: 5px;
    }

    #dot2 {
        width: 28px;
        height: 38px;
        position: absolute;
        left: 207px;
        top: 404px;
        background-color: #15DBFF;
        border-radius: 5px;
        transform: rotate(14deg);
    }

    #dot3 {
        width: 28px;
        height: 38px;
        position: absolute;
        left: 168px;
        top: 387px;
        background-color: #15DBFF;
        border-radius: 5px;
        transform: rotate(30deg);
    }

    #dot4 {
        width: 28px;
        height: 38px;
        position: absolute;
        left: 136px;
        top: 362px;
        background-color: #15DBFF;
        border-radius: 5px;
        transform: rotate(45deg);
    }

    #dot5 {
        width: 28px;
        height: 38px;
        position: absolute;
        left: 110px;
        top: 328px;
        background-color: #15DBFF;
        border-radius: 5px;
        transform: rotate(60deg);
    }
}
</style>

图片资源地址：circle_1.png · NevermoreSF/resources -…

xdm有更好的实现方法，请指导下