Динамический радиальный индикатор выполнения

Я работаю над индикатором радиального прогресса для сбора средств и хотел бы отслеживать пожертвования в процентах.

У меня все работает, кроме того, что заливка обводки отключена. Пример: я установил процент данных на 75, и он отображает около 55%. (Обводка заливки начинает отображаться в data-percent = "38")

Мне нужно перейти от 0% до 100%

Может ли кто-нибудь помочь мне исправить ошибку расчета?

HTML:

<div class = "flex justify-center mt-10">
  <div class = "w-1/2">
    <div class = "svgbox">
      <div class = "progressdiv" data-percent = "38">
        <svg class = "progress" viewBox = "0 0 100 100" xmlns = "http://www.w3.org/2000/svg">
  <circle cx = "50" cy = "50" r = "50" fill = "transparent" stroke-dasharray = "502.4" stroke-dashoffset = "0" ></circle>
  <circle class = "bar" cx = "50" cy = "50" r = "50" fill = "transparent" stroke-dasharray = "502.4" stroke-dashoffset = "0"></circle>
        </svg>
        <img src = "https://www.okayplayer.com/wp-content/uploads/2015/07/Barack-Obama-House-Music-Square.jpg" class = "rounded-full absolute left-0 top-0" style = "width: 92%;left: 50%; top:50%; transform: translate(-50% , -50%);">
      </div>
    </div>
  </div>
</div>

CSS:

body {
  background-color: #1e2d47;
}

.progress {
  display: block;
  margin: 0 auto;
  overflow: visible;
  transform: rotate(-90deg) rotateX(180deg);
}

.progress circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease;
  stroke: #f5f5f5;
  stroke-width: 2px;
}

.progress .bar {
  stroke: #d66f6f;
}

.progressdiv {
  position: relative;
}

.svgbox {
  height: 0;
  width: 100%;
  padding-top: (svg height / svg width) * width-value;
  position: relative;
}

JS:

(function() {
  window.onload = function() {
    var totalProgress, progress;
    const circles = document.querySelectorAll(".progress");
    for (var i = 0; i < circles.length; i++) {
      totalProgress = circles[i]
        .querySelector("circle")
        .getAttribute("stroke-dasharray");
      progress = circles[i].parentElement.getAttribute("data-percent");

      circles[i].querySelector(".bar").style["stroke-dashoffset"] =
        totalProgress * progress / 100;
    }
  };
})();

Кодепен: https://codepen.io/daugaard47/pen/OGBbBK