renderings

Use components to encapsulate this, code: you need to pass in parameters as the class name, the value in the middle, and the ring percentage. The numbers inside are adjusted according to the position.

Then cx and cy in the circle in this svg are the coordinate positions, stroke-width is the border width, and stroke is the color.

function circle(className, value, percent) {
  let content = `
  <div class="cirbox" style="position:relative;width:100px;height:100px">
  <svg width="100" height="100" style="transform: rotate(-90deg);">
    <circle
      cx="50"
      cy="50"
      r="40"
      stroke-width="6"
      stroke="#e9eef2"
      fill="none"
    ></circle>
    <circle
      class="${className+"path"}"
      cx="50"
      cy="50"
      r="40"
      stroke-width="6"
      stroke="red"
      fill="none"
    ></circle>
  </svg><div class="useNum" style="position:absolute;top:40px;width:100px;text-align:center;">${value}</div>
  </div>
  `;

/* .useNum {
        position: absolute;
        top: 0;
        left: -50px;
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: 900;
        height: 400px;
        line-height: 400px;
      } */

  $(`.${className}`).append(content);
  let circle = document.querySelector(`.${className}path`),
    len = 2 * Math.PI * circle.getAttribute("r");
  //   console.log(circle, range, len);
  let perimeter = circle.getTotalLength(); //圆环的周长
  //   console.log(perimeter);
  // 在圆环上设置属性
  circle.style.strokeDasharray = len;
  circle.style.strokeDashoffset = len - len * percent;
  console.log(circle.style.strokeDashoffset)
  circle.style.transition = "stroke-dashoffset .3s ease-in-out";
}

use:

<!-- 参考连接：https://moxo.io/blog/2017/07/22/svg-circular-animation/#%E7%AC%AC%E4%B8%80%E6%AD%A5-%E5%9C%86%E5%BD%A2%E7%9A%84-svg-shape-lt-circle-gt -->
<!-- 参考连接：https://blog.csdn.net/weixin_44137800/article/details/113697403 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        height: 100%;
        width: 100%;
        overflow: hidden;
      }

      .circlebox {
        position: relative;
        
      }
      .circle1{
          position: relative;
      }
      .circle2{
          position: relative;
      }

      /* .useNum {
        position: absolute;
        top: 0;
        left: -50px;
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: 900;
        height: 400px;
        line-height: 400px;
      } */
      #range {
        height: 20px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="./circle.js"></script>
  </head>

  <body>
    <div class="circlebox">
      <!-- <svg width="400" height="400">
        <circle
          cx="200"
          cy="200"
          r="100"
          stroke-width="10"
          stroke="#e9eef2"
          fill="none"
        ></circle>
        <circle
          class="path"
          cx="200"
          cy="200"
          r="100"
          stroke-width="10"
          stroke="red"
          fill="none"
        ></circle>
      </svg>
      <div class="useNum">使用率32</div> -->
      <!-- 控制器 -->
      <!-- <input id="range" type="range" min="0" max="100" step="1" value="0" /> -->
    </div>
    <div class="circle1"></div>
    <div class="circle2"></div>

    <script>
    //   let circle = document.querySelector(".path"),
    //     range = document.querySelector("#range"),
    //     len = 2 * Math.PI * circle.getAttribute("r");
    //   //   console.log(circle, range, len);
    //   let perimeter = circle.getTotalLength(); //圆环的周长
    //   //   console.log(perimeter);
    //   // 在圆环上设置属性
    //   circle.style.strokeDasharray = len;
    //   circle.style.strokeDashoffset =len - len * 0.7;
    //   circle.style.transition = "stroke-dashoffset .3s ease-in-out";
      
    //   range.oninput = () => {
    //     let range_value = Number(range.value),
    //     value = len - (range_value / 100) * len;
    //     circle.style.strokeDashoffset = value;
    //   };
       $(function(){
           circle('circlebox',32,.2)
           circle('circle1',80,.3)
           circle('circle2',80,.4)
       })

    </script>
  </body>
</html>

reference:

SVG drawing circular progress bar

Notes: Principle of SVG Circular Animation (Progress Bar) - Pepper's Small Station

Use svg to draw a circle

renderings

Guess you like