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

如果用js+css实现圆环型的进度条:

直接上代码:

js 复制代码
<!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>
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
序属秋秋秋1 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
Savior`L1 小时前
CSS知识复习5
前端·css
ruan1145142 小时前
MySQL4种隔离级别
java·开发语言·mysql
quant_19863 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
Liudef066 小时前
儿童趣味记忆配对游戏
css·游戏·css3
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
百锦再7 小时前
详细解析 .NET 依赖注入的三种生命周期模式
java·开发语言·.net·di·注入·模式·依赖
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
失败又激情的man8 小时前
python之requests库解析
开发语言·爬虫·python