我怎样才能像谷歌一样制作一个百分比圈？ [复制]

Question

我正在尝试在这张图片上画一个百分比圆圈：

我在这里尝试过使用它，但我不是很高兴。我无法改变圈子的进度，总而言之，我不确定这是否是我的最佳想法：

circle {
    stroke-dasharray: 326px;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-width: 4px;
    stroke: #000000;
    fill: none;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

 <svg>
     <circle r="52" cx="54" cy="54"></circle>
 </svg>

Answer 1

增加stroke-dasharray 属性，这样一个破折号就足以让它绕着圆圈绕一圈，然后再绕几圈。然后为stroke-dashoffset 属性设置动画。

奖励：添加一个<span> 来保存百分比，并通过添加一个百分比值来为动画的每个百分比显示动画content 属性。

circle {
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
  stroke-linecap: round;
  stroke-width: 4px;
  stroke: #000000;
  fill: none;
  transform: rotate(-86deg);
  transform-origin: center;
  animation-name: drawCircle;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

div {
  position: absolute;
  text-align: right;
  width: 100px;
  top: 60px;
  left: 70px;
  font-size: 2em;
}

#percent::after {
  content: "0";
  animation-name: writePercent;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes drawCircle {
  0% {
    stroke-dashoffset: 330;
  }
  30% {
    stroke-dashoffset: 200;
  }
  100% {
    stroke-dashoffset: 200;
  }
}

@keyframes writePercent {
  0% {
    content: "0";
  }
  1% {
    content: "1";
  }
  2% {
    content: "2";
  }
  3% {
    content: "3";
  }
  4% {
    content: "4";
  }
  5% {
    content: "5";
  }
  6% {
    content: "6";
  }
  7% {
    content: "7";
  }
  8% {
    content: "8";
  }
  9% {
    content: "9";
  }
  10% {
    content: "10";
  }
  11% {
    content: "11";
  }
  12% {
    content: "12";
  }
  13% {
    content: "13";
  }
  14% {
    content: "14";
  }
  15% {
    content: "15";
  }
  16% {
    content: "16";
  }
  17% {
    content: "17";
  }
  18% {
    content: "18";
  }
  19% {
    content: "19";
  }
  20% {
    content: "20";
  }
  21% {
    content: "21";
  }
  22% {
    content: "22";
  }
  23% {
    content: "23";
  }
  24% {
    content: "24";
  }
  25% {
    content: "25";
  }
  26% {
    content: "26";
  }
  27% {
    content: "27";
  }
  28% {
    content: "28";
  }
  29% {
    content: "29";
  }
  30% {
    content: "30";
  }
  100% {
    content: "30";
  }
}

<svg>
     <circle r="52" cx="150" cy="54"></circle>
 </svg>
<div><span id="percent"></span>%</div>