纯css，svg的占比动画

svg占比动画

最近用svg做了个占比的动画，如有更好的建议，烦请指教，样式如下
具体代码如下

html代码

      <div class="progress_box">
          <div class="progressbg_img"></div>
          <svg width="100%" height="100%" version="1.1">
              <defs>
                  <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
                  fx="50%" fy="50%">
                      <stop offset="10%" style="stop-color:rgb(3,91,197);
                      stop-opacity:0.5"/>
                      <stop offset="100%" style="stop-color:rgb(148,228,239);
                      stop-opacity:1"/>
                  </radialGradient>
              </defs>
              <circle cx="100" cy="100" r="100" fill="#0e2338"/>
              <circle cx="100" cy="100" r="90" fill="#0f2a3f"/>
              <circle cx="100" cy="100" r="80" fill="#0e3145"/>
              <circle cx="100" cy="100" r="60" style="fill:url(#grey_blue)"/>
              <circle cx="100" cy="100" r="68" stroke="#1fc9e3" stroke-width="5" style="fill:transparent"/>
              <text class="circle_progress_text" x="100" y="100" font="36px Arial, sans-serif" text-anchor="middle" fill="#fff" dy="0.4em">60%</text>
          </svg>
          <svg class="progress_position" width="100%" height="100%">
              <!-- <path id="svg_4" d="m32,100c0,-37.569061 30.430939,-68 68,-68c37.569061,0 68,30.430939 68,68c0,37.569061 -30.430939,68 -68,68c-37.569061,0 -68,-30.430939 -68,-68z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="6" stroke="#000" fill-opacity="0"/> -->
              <path id="svg_4" d="m32,100c0,-37.569061 30.430939,-68 68,-68c37.569061,0 68" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="8" stroke="#0e3145" fill-opacity="0"/>
          </svg>
      </div>

css样式

.progress_box{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.circle_progress_text{
    font-size: 38px;
}
.progressbg_img{
    width: 170px;
    height: 170px;
    background-image: url("./assets/images/progress_img.png");//此处是齿轮的图片，也可改用自己的图片
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1000;
    background-size: 100% 100%;
    top: 16px;
    left: 14px;
}
.progress_position{
    position: absolute;
    top: 0;
    left: 0;
    animation: draw 5s linear infinite;
}
@keyframes draw{
    0%{
        transform: rotate(0deg);
    }
    0%{
        transform: rotate(-360deg);
    }
}