add inner box shadow on stroke width

Question

I have css and html with svg styles to make a circle progress bar and I want to add an inner box shadow in stroke width.

svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #f5f4f4;
    stroke-width: 25px;
    stroke-linecap: round;
    transform: translate(13px, 12px);
    box-shadow: inset 10px 10px 25px #ccc;
}

<div class="container">
    <div class="card">
      <div class="box">
        <div class="percent">
          <svg>
            <circle cx="100" cy="100" r="100"></circle>
            <circle cx="100" cy="100" r="100"></circle>
          </svg>
          <div class="number">
            <h2>55<span>%</span></h2>
          </div>
        </div>
      </div>
    </div>
  </div>