圆形进度条实现

最新推荐文章于 2024-06-09 09:49:42 发布

yy_33404590

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量1.6k

点赞数

分类专栏：前端学习文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_33404590/article/details/128731363

版权

前端学习专栏收录该内容

32 篇文章 1 订阅

订阅专栏

项目中需要实现圆形进度条：找到了两种方法（动态需要配合js实现）

利用css3中的tranform属性
利用svg实现（可以实现炫酷的效果）

方法1: css transform

  <style>
    .circle {
      width: 100px;
      height: 100px;
      background-color: #eee;
      margin: 100px auto;
      position: relative;
      border-radius: 50%;
    }

    .left,
    .right {
      overflow: hidden;
      width: 50px;
      height: 100px;
      position: absolute;
      opacity: 0.5;
    }

    .left .left-circle,
    .right .right-circle {
      width: 50px;
      height: 100px;
      background: red;
    }

    .left .left-circle {
      border-top-left-radius: 100px;
      border-bottom-left-radius: 100px;
      /* 修改旋转的中心点 */
      transform-origin: right center;
      transform: rotate(180deg);

      /* animation: progress1 2s linear forwards; */
      animation-delay: 2s;

    }

    .right .right-circle {
      background: red;
      border-top-right-radius: 100px;
      border-bottom-right-radius: 100px;
      transform-origin: left center;
      transform: rotate(-180deg);
    }

    .right {
      right: 0;
    }

    .inner {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #999;
      font-size: 20px;
      background-color: white;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      text-align: center;
      line-height: 80px;
    }
  </style>
  <body>
  <div class="circle">
    <div class="left">
      <div class="left-circle"></div>
    </div>
    <div class="right">
      <div class="right-circle"></div>
    </div>
    <div class="inner">100%</div>

  </div>
  <script type="text/javascript">
    let innerDom = document.querySelector('.inner');
    let leftCircle = document.querySelector('.left-circle');
    let rightCircle = document.querySelector('.right-circle');
    let timer = null;
    let loader = 0; // 当前数据
    let total = 1500;
    let limit = 40;


// 通过设置定时器模拟请求，动态获取数据
    setInterval(() => {
      let num = Number((loader / total) * 100).toFixed(1);
      let deg = Number((loader / total) * 360).toFixed(0);
      if (num > limit) {
        clearInterval(timer)
      } else {
        loader++;
        innerDom.textContent = num + '%';
        if (deg > 180) {
          leftCircle.style.transform = `rotate(${deg}deg)`
        } else {
          rightCircle.style.transform = `rotate(-${180 - deg}deg)`
        }
      }
    }, 1);


  </script>

</body>

方法2: svg

<style>
    .text {
      text-anchor: middle;
      dominant-baseline: middle
    }

    body {
      text-align: center;
    }
  </style>
<body>
  <svg xmln="http://www.w3.org/200/svg" height="700" width="700">
    <!-- 设置底色的圆环 -->
    <circle cx="350" cy="350" r="300" fill="none" stroke="gray" stroke-width="60" stroke-linecap="round"></circle>

    <!-- 设置进度条 -->
    <circle class="progress" transform="rotate(-90, 350, 350)" cx="350" cy="350" r="300" fill="none" stroke="red"
      stroke-width="60" stroke-linecap="round"></circle>
    <!-- 文本 -->
    <text class="text" x="350" y="350" font-size="180" fill="red">36</text>
  </svg>
  <script type="text/javascript">
    var progressDom = document.querySelector('.progress');
    var textDom = document.querySelector('.text');
    function rotateCircle(persent) {
      var circleLength = Math.floor(2 * Math.PI * parseFloat(progressDom.getAttribute('r')));
      var value = persent * circleLength / 100;
      // red: rgb(255, 0, 0) , blue: rgb(0, 191, 255)
      var red = 255 + parseInt((0 - 255) / 100 * persent);
      var green = 0 + parseInt((191 - 0) / 100 * persent);
      var blue = 0 + parseInt((255 - 0) / 100 * persent);

      progressDom.setAttribute('stroke-dasharray', value + ",10000");
      progressDom.setAttribute('stroke', `rgb(${red}, ${green}, ${blue})`);
      textDom.innerHTML = persent + '%';
      textDom.setAttribute('fill', `rgb(${red}, ${green}, ${blue})`)
    }

    let limit = 50;

    let num = 0;
    setInterval(() => {
      num++;
      if (num > limit) {
        return;
      }
      rotateCircle(num)
    }, 30);
  </script>
</body>