当前位置：首页 > article >正文

用js+css实现圆环型的进度条——js+css基础积累

article 2024/10/25 19:59:53

如果用js+css实现圆环型的进度条：
在这里插入图片描述
直接上代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>环形进度条</title>
  </head>

  <body>
    <div class="percent">
      <svg style="transform: rotate(-90deg)">
        <circle cx="50" cy="50" r="50" />
        <circle id="circle" cx="50" cy="50" r="50" style="stroke: red" />
      </svg>
      <div class="num">
        <h2>
          <span id="per">0</span>
          <span>%</span>
        </h2>
      </div>
    </div>
    <div class="percent">
      <svg style="transform: rotate(-90deg)">
        <circle cx="50" cy="50" r="50" />
        <circle id="circle2" cx="50" cy="50" r="50" style="stroke: #f90" />
      </svg>
      <div class="num">
        <h2>
          <span id="per2">0</span>
          <span>%</span>
        </h2>
      </div>
    </div>
    <div class="percent">
      <svg style="transform: rotate(-90deg)">
        <circle cx="50" cy="50" r="50" />
        <circle id="circle3" cx="50" cy="50" r="50" style="stroke: #67c23a" />
      </svg>
      <div class="num">
        <h2>
          <span id="per3">0</span>
          <span>%</span>
        </h2>
      </div>
    </div>
  </body>
  <style>
    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
    }

    .percent {
      position: relative;
      width: 110px;
      height: 110px;
    }

    .percent svg {
      width: 110px;
      height: 110px;
    }

    .percent svg circle {
      fill: none;
      stroke-width: 10;
      stroke: #1258e3;
      transform: translate(5px, 5px);
      /* 设置虚线长度 = 圆的周长（2*50*3.1415926） */
      stroke-dasharray: 310;
      /* 设置圆的空白间隙 */
      stroke-dashoffset: 310;
    }

    .percent svg circle:nth-child(1) {
      stroke-dashoffset: 0;
      stroke: #f3f3f3;
    }

    .percent svg circle:nth-child(2) {
      stroke-dashoffset: calc(310 - 310 * (0 / 100));
      stroke-linecap: round;
    }

    .percent .num {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #per {
      font-size: 22px;
    }
  </style>
  <script>
    circleRender(
      document.querySelector('#circle'),
      document.querySelector('#per'),
      50
    );
    circleRender(
      document.querySelector('#circle2'),
      document.querySelector('#per2'),
      10
    );
    circleRender(
      document.querySelector('#circle3'),
      document.querySelector('#per3'),
      95
    );
    function circleRender(circle, per, percent) {
      let num = 0;
      const timer = setInterval(() => {
        num += 1;
        if (num > percent) {
          num = percent;
          clearInterval(timer);
          blo = false;
        }
        // 设置进度
        circle.style.strokeDashoffset = `calc(310 - 310*(${num}/100))`;
        per.innerHTML = num;
      }, 100);
    }
  </script>
</html>