环形生长进度条vue3代码

xiefandaren

vue

<!--
 * @Author: xiefan2333 1668903208@qq.com
 * @Date: 2023-08-03 01:06:33
 * @LastEditors: xiefan2333 1668903208@qq.com
 * @LastEditTime: 2023-08-04 00:57:35
 * @FilePath: \7e:\自媒体\threejs商业课程开发\第五讲 双平台眼镜产品项目得制作\教程工程\眼镜程序开发\ceshi\src\components\load.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup >
import { reactive, toRefs, ref, computed, onMounted } from 'vue'


onMounted(() => {
    const glowlineBox = document.getElementsByClassName('linebox')[0]
    const glowline = document.getElementsByClassName('glowLine')

    let loadNum = 0;
    let jianju = 1.8;

    const loadJ = (num) => {
        let clock = setInterval(() => {
            if (loadNum < num) {
                loadNum++
                for (let a = 0; a < glowline.length; a++) {
                    glowline[a].remove()//清楚节点

                }
                for (let i = 0; i < loadNum / 2 / jianju; i++) {
                    glowlineBox.innerHTML += '<div class="glowLine"></div>'
                    glowline[i].style.transform = 'rotate(' + 7.2 * jianju * i + 'deg)'
                }
                // console.log(glowline);
            } else {
                clearInterval(clock)
            }

        }, 20);
    }
    loadJ(60)



    // click() {
    //     console.log('按钮被点击')
    // }



})


</script>
<template>
    <div>
        <div class="bg"></div>
        <div class="fullscreen">
            <!-- <div class="iconBG"> </div> -->
            <div class='linebox'>
                <div class="glowLine"></div>
            </div>
            <!-- <button class="btn">点击进度</button> -->
        </div>

    </div>
</template>
<style scoped lang='less'>
.btn {
    position: absolute;
    height: 30px;
    width: 150px;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: 150px;
    border: 1px red solid;
}
</style>
<style src="./css/load.less"></style>

less

.rest {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.fullscreen {
    position: absolute;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.bg {
    .rest;
    background-color: rgb(201, 201, 201);
}

@widthg: 120px;
@middleg: -85px;


.iconBG {
    .fullscreen;
    width: @widthg;
    height: @widthg;
    border: 25px rgb(104, 104, 104) solid;
    opacity: 0.5;
    border-radius: 50%;
    opacity: 0.2;
    left: 50%;
    top: 50%;
    margin-left: @middleg ;
    margin-top: @middleg ;
    // animation: rotateR 9s infinite linear;
    // z-index: 1;
    background-size: cover;
}

.linebox {
    .fullscreen;
    width: @widthg+40px;
    height: @widthg+40px;
    border: 0px solid red;
    left: 50%;
    top: 50%;
    margin-left: -81px;
    margin-top: -80px;
    overflow: visible;
}

.glowLine {
    .fullscreen;
    width: 5.5px;
    height: 13px;
    background-color: black;
    left: 50%;
 
    transform-origin: 50% 79px;
    overflow: visible;
    // -webkit-transform-origin-x: -0.5px;

    // animation: rotateR 9s infinite linear;

}


@keyframes rotateR {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}