CSS特效---环形进度条

最新推荐文章于 2024-09-18 16:43:04 发布

bbamx.

最新推荐文章于 2024-09-18 16:43:04 发布

阅读量693

点赞数 4

分类专栏： CSS特效合集文章标签： css 前端

本文链接：https://blog.csdn.net/nibabaoo/article/details/138134692

版权

CSS特效合集专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、演示

2、一切尽在代码中

<!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>
        <circle cx="70" cy="70" r="70" />
        <circle id="circle" cx="70" cy="70" r="70" />
      </svg>
      <div class="num">
        <h2>
          <span id="per">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: 150px;
      height: 150px;
    }

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

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

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

    .percent svg circle:nth-child(2) {
      stroke-dashoffset: calc(440 - 440 * (0 / 100));
      stroke: #1258e3;
    }

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

    #per {
      font-size: 48px;
    }
  </style>
  <script>
    const circle = document.querySelector('#circle')
    const per = document.querySelector('#per')
    let num = 0
    const timer = setInterval(() => {
      num += 1
      if (num > 100) {
        num = 100
        clearInterval(timer)
        blo = false
      }
      // 设置进度
      circle.style.strokeDashoffset = `calc(440 - 440*(${num}/100))`
      per.innerHTML = num
    }, 100)
  </script>
</html>