css 中 svg 画一个圆形进度条

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      background: #ffffff;
      position: relative;
    }
    circle {
      stroke-width: 8px;
      transform-origin: center;
    }
    .inner {
      stroke: #00ffff;
      transform: scale(0.9) rotate(-90deg);
    }
    .bg {
      stroke: #eeeeee;
      transform: scale(0.9);
    }
  </style>
</head>
<body>
  <div class="box">
    <svg width="50" height="50" viewBox="0 0 100 100">
      <circle r="50" cx="50" cy="50" fill="transparent" class="bg"/>  // 背景颜色
      // 进度 stroke-dasharray 周长  stroke-dashoffset 旋转长
      <circle r="50" cx="50" cy="50" fill="transparent" stroke-dasharray="314" stroke-dashoffset="240" class="inner"/>
    </svg>
  </div>
</body>
</html>

在这里插入图片描述

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页