环形生长进度条vue3代码

xiefandaren

vue

1. <!--
   
2. * @Author: xiefan2333 1668903208@qq.com
   
3. * @Date: 2023-08-03 01:06:33
   
4. * @LastEditors: xiefan2333 1668903208@qq.com
   
5. * @LastEditTime: 2023-08-04 00:57:35
   
6. * @FilePath: \7e:\自媒体\threejs商业课程开发\第五讲 双平台眼镜产品项目得制作\教程工程\眼镜程序开发\ceshi\src\components\load.vue
   
7. * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
   
8. -->
   
9. <script setup >
   
10. import { reactive, toRefs, ref, computed, onMounted } from 'vue'
    
11. 
    
12. 
    
13. onMounted(() => {
    
14.     const glowlineBox = document.getElementsByClassName('linebox')[0]
    
15.     const glowline = document.getElementsByClassName('glowLine')
    
16. 
    
17.     let loadNum = 0;
    
18.     let jianju = 1.8;
    
19. 
    
20.     const loadJ = (num) => {
    
21.         let clock = setInterval(() => {
    
22.             if (loadNum < num) {
    
23.                 loadNum++
    
24.                 for (let a = 0; a < glowline.length; a++) {
    
25.                     glowline[a].remove()//清楚节点
    
26. 
    
27.                 }
    
28.                 for (let i = 0; i < loadNum / 2 / jianju; i++) {
    
29.                     glowlineBox.innerHTML += '<div class="glowLine"></div>'
    
30.                     glowline[i].style.transform = 'rotate(' + 7.2 * jianju * i + 'deg)'
    
31.                 }
    
32.                 // console.log(glowline);
    
33.             } else {
    
34.                 clearInterval(clock)
    
35.             }
    
36. 
    
37.         }, 20);
    
38.     }
    
39.     loadJ(60)
    
40. 
    
41. 
    
42. 
    
43.     // click() {
    
44.     //     console.log('按钮被点击')
    
45.     // }
    
46. 
    
47. 
    
48. 
    
49. })
    
50. 
    
51. 
    
52. </script>
    
53. <template>
    
54.     <div>
    
55.         <div class="bg"></div>
    
56.         <div class="fullscreen">
    
57.             <!-- <div class="iconBG"> </div> -->
    
58.             <div class='linebox'>
    
59.                 <div class="glowLine"></div>
    
60.             </div>
    
61.             <!-- <button class="btn">点击进度</button> -->
    
62.         </div>
    
63. 
    
64.     </div>
    
65. </template>
    
66. <style scoped lang='less'>
    
67. .btn {
    
68.     position: absolute;
    
69.     height: 30px;
    
70.     width: 150px;
    
71.     top: 50%;
    
72.     left: 50%;
    
73.     margin-left: -75px;
    
74.     margin-top: 150px;
    
75.     border: 1px red solid;
    
76. }
    
77. </style>
    
78. <style src="./css/load.less"></style>
    
79. 
    
80. 
    

复制代码

less

1. .rest {
   
2.     position: absolute;
   
3.     top: 0px;
   
4.     left: 0px;
   
5.     height: 100vh;
   
6.     width: 100vw;
   
7.     overflow: hidden;
   
8. }
   
9. 
   
10. .fullscreen {
    
11.     position: absolute;
    
12.     height: 100vh;
    
13.     width: 100vw;
    
14.     overflow: hidden;
    
15. }
    
16. 
    
17. .bg {
    
18.     .rest;
    
19.     background-color: rgb(201, 201, 201);
    
20. }
    
21. 
    
22. @widthg: 120px;
    
23. @middleg: -85px;
    
24. 
    
25. 
    
26. .iconBG {
    
27.     .fullscreen;
    
28.     width: @widthg;
    
29.     height: @widthg;
    
30.     border: 25px rgb(104, 104, 104) solid;
    
31.     opacity: 0.5;
    
32.     border-radius: 50%;
    
33.     opacity: 0.2;
    
34.     left: 50%;
    
35.     top: 50%;
    
36.     margin-left: @middleg ;
    
37.     margin-top: @middleg ;
    
38.     // animation: rotateR 9s infinite linear;
    
39.     // z-index: 1;
    
40.     background-size: cover;
    
41. }
    
42. 
    
43. .linebox {
    
44.     .fullscreen;
    
45.     width: @widthg+40px;
    
46.     height: @widthg+40px;
    
47.     border: 0px solid red;
    
48.     left: 50%;
    
49.     top: 50%;
    
50.     margin-left: -81px;
    
51.     margin-top: -80px;
    
52.     overflow: visible;
    
53. }
    
54. 
    
55. .glowLine {
    
56.     .fullscreen;
    
57.     width: 5.5px;
    
58.     height: 13px;
    
59.     background-color: black;
    
60.     left: 50%;
    
61. 
    
62.     transform-origin: 50% 79px;
    
63.     overflow: visible;
    
64.     // -webkit-transform-origin-x: -0.5px;
    
65. 
    
66.     // animation: rotateR 9s infinite linear;
    
67. 
    
68. }
    
69. 
    
70. 
    
71. @keyframes rotateR {
    
72.     from {
    
73.         transform: rotate(0deg);
    
74.     }
    
75. 
    
76.     to {
    
77.         transform: rotate(360deg);
    
78.     }
    
79. }

复制代码