环形生长进度条vue3代码

[复制链接]
查看: 145   回复: 0

164

主题

164

帖子

939

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
939
2023-8-4 00:58:54   显示全部楼层   阅读模式  
环形生长.png

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. onMounted(() => {
  12.     const glowlineBox = document.getElementsByClassName('linebox')[0]
  13.     const glowline = document.getElementsByClassName('glowLine')

  14.     let loadNum = 0;
  15.     let jianju = 1.8;

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

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

  31.         }, 20);
  32.     }
  33.     loadJ(60)



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



  37. })


  38. </script>
  39. <template>
  40.     <div>
  41.         <div class="bg"></div>
  42.         <div class="fullscreen">
  43.             <!-- <div class="iconBG"> </div> -->
  44.             <div class='linebox'>
  45.                 <div class="glowLine"></div>
  46.             </div>
  47.             <!-- <button class="btn">点击进度</button> -->
  48.         </div>

  49.     </div>
  50. </template>
  51. <style scoped lang='less'>
  52. .btn {
  53.     position: absolute;
  54.     height: 30px;
  55.     width: 150px;
  56.     top: 50%;
  57.     left: 50%;
  58.     margin-left: -75px;
  59.     margin-top: 150px;
  60.     border: 1px red solid;
  61. }
  62. </style>
  63. <style src="./css/load.less"></style>


复制代码
less
  1. .rest {
  2.     position: absolute;
  3.     top: 0px;
  4.     left: 0px;
  5.     height: 100vh;
  6.     width: 100vw;
  7.     overflow: hidden;
  8. }

  9. .fullscreen {
  10.     position: absolute;
  11.     height: 100vh;
  12.     width: 100vw;
  13.     overflow: hidden;
  14. }

  15. .bg {
  16.     .rest;
  17.     background-color: rgb(201, 201, 201);
  18. }

  19. @widthg: 120px;
  20. @middleg: -85px;


  21. .iconBG {
  22.     .fullscreen;
  23.     width: @widthg;
  24.     height: @widthg;
  25.     border: 25px rgb(104, 104, 104) solid;
  26.     opacity: 0.5;
  27.     border-radius: 50%;
  28.     opacity: 0.2;
  29.     left: 50%;
  30.     top: 50%;
  31.     margin-left: @middleg ;
  32.     margin-top: @middleg ;
  33.     // animation: rotateR 9s infinite linear;
  34.     // z-index: 1;
  35.     background-size: cover;
  36. }

  37. .linebox {
  38.     .fullscreen;
  39.     width: @widthg+40px;
  40.     height: @widthg+40px;
  41.     border: 0px solid red;
  42.     left: 50%;
  43.     top: 50%;
  44.     margin-left: -81px;
  45.     margin-top: -80px;
  46.     overflow: visible;
  47. }

  48. .glowLine {
  49.     .fullscreen;
  50.     width: 5.5px;
  51.     height: 13px;
  52.     background-color: black;
  53.     left: 50%;

  54.     transform-origin: 50% 79px;
  55.     overflow: visible;
  56.     // -webkit-transform-origin-x: -0.5px;

  57.     // animation: rotateR 9s infinite linear;

  58. }


  59. @keyframes rotateR {
  60.     from {
  61.         transform: rotate(0deg);
  62.     }

  63.     to {
  64.         transform: rotate(360deg);
  65.     }
  66. }
复制代码




回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司