<div class="graph-box">
  <svg class="chart">
    <circle class="chart-base" cx="100" cy="100" r="92.5"></circle>
    <circle class="chart-line" cx="100" cy="100" r="92.5"></circle>
  </svg>
  <p class="chart-data">
   <span class="count">67</span>
  </p>
</div>

.graph-box {
  margin: 50px auto 0;
  position: relative;
  display: flex;
  justify-content: center;
  width: 200px;
  height: 200px;
}

.chart {
  transform: rotate(-90deg); /* スタート座標を回転 */
  
  circle {
    fill: none;
    stroke-width: 15;
    // scroll-dasharray: 0;
  }
  
  &-base {
    stroke: #eff7fb;
  }
  
  &-line {
    stroke: #1689c8;
    stroke-linecap: round;
    // 外周 = 直径 x Math.PI
    // stroke-dasharray: 581;
    // 外周 ― （外周 × 入れたい数値） ÷ 100
    stroke-dashoffset: calc(581px - (581px * 67) / 100);
    animation: move-path 1.3s forwards;
  }
}

@keyframes move-path {
  0% {
    stroke-dasharray: 0, 581;
  }
  100% {
    stroke-dasharray: 581, 581;
  }
}

.chart-data {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #1689c8;
    margin: 0;
  }

  .count {
    display: block;
    font-size: 45px;

    &:after {
      font-size: 36px;
      content: "%";
    }
  }