Заполнить строку circle с выводом процентов, относительно другого circle

Хочу повернуть круг .progressbar__thumb, чтобы линия на круге двигалась из другого места. Но что-то идёт не так. Подскажите, как правильно повернуть?

const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
let frameLoop = null;

function onCompleteGsap() {
  cancelAnimationFrame(frameLoop);
}

gsap.to(progressbarThumb, 5, {
  '--percent': 50,
  onComplete: onCompleteGsap,
  ease: 'linear'
});

function loop() {
  const percent = gsap.getProperty(progressbarThumb, '--percent');

  if (percent > 99) {
    progressbarText.textContent = 'Закончили?';
  } else if (percent > 60) {
    progressbarText.textContent = 'Разгоняемся!';
  } else if (percent > 40) {
    progressbarText.textContent = 'Погнали!';
  }
  progressbarPercent.textContent = Math.round(percent);
  frameLoop = requestAnimationFrame(loop);
}

frameLoop = requestAnimationFrame(loop);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.progressbar {
  max-width: 150px;
  font-size: 10px;
  --color: rgb(0, 186, 16);
  --percent: 0; /* процент, насколько заполнен круг */
  --PI: 3.141592;
  --r: 30;
  --strokeWidth: 2;
  --total: calc( var(--PI) * var(--r));
}

.progressbar circle {
  r: var(--r);
}

.progressbar text {
  fill: var(--color);
}

.progressbar__percent {
  font-size: 16px;
}

.progressbar__track {
  fill: transparent;
  stroke: #ededed;
  stroke-width: var(--strokeWidth);
}

.progressbar__thumb {
  fill: transparent;
  --strokeDasharray: calc(2 * var(--total) * var(--percent) / 100) calc(2 * var(--total));
  stroke-linecap: round;
  stroke-dasharray: var(--strokeDasharray);
  stroke: var(--color);
  stroke-width: var(--strokeWidth);
  
  transform-origin: center;
  transform: rotate(90deg);
}
<svg class="progressbar" viewBox="0 0 62 80">
    <circle class="progressbar__track" cx="31" cy="31"></circle>
    <circle class="progressbar__thumb" cx="31" cy="31"></circle>
    <text x="32" y="33" class="progressbar__percent" text-anchor="middle" dominant-baseline="middle"><tspan>0</tspan>%</text>
    <text x="32" y="73" class="progressbar__info" text-anchor="middle" dominant-baseline="middle"><tspan>Загрузочка ...</tspan></text>
</svg>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>


Ответы (1 шт):

Автор решения: Sevastopol'
  1. Установим координаты точки, относительно которой будет происходить трансформация элемента - transform-origin: 50% 50%;
  2. Добавим свойство transform-box со значением fill-box, чтобы проценты считались относительно элемента.

const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
let frameLoop = null;

function onCompleteGsap() {
  cancelAnimationFrame(frameLoop);
}

gsap.to(progressbarThumb, 5, {
  '--percent': 100,
  onComplete: onCompleteGsap,
  ease: 'linear'
});

function loop() {
  const percent = gsap.getProperty(progressbarThumb, '--percent');

  if (percent > 99) {
    progressbarText.textContent = 'Закончили?';
  } else if (percent > 60) {
    progressbarText.textContent = 'Разгоняемся!';
  } else if (percent > 40) {
    progressbarText.textContent = 'Погнали!';
  }
  progressbarPercent.textContent = Math.round(percent);
  frameLoop = requestAnimationFrame(loop);
}

frameLoop = requestAnimationFrame(loop);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.progressbar {
  max-width: 150px;
  font-size: 10px;
  --color: rgb(0, 186, 16);
  --percent: 0;
  /* процент, насколько заполнен круг */
  --PI: 3.141592;
  --r: 30;
  --strokeWidth: 2;
  --total: calc( var(--PI) * var(--r));
}

.progressbar circle {
  r: var(--r);
}

.progressbar text {
  fill: var(--color);
}

.progressbar__percent {
  font-size: 16px;
}

.progressbar__track {
  fill: transparent;
  stroke: #ededed;
  stroke-width: var(--strokeWidth);
}

.progressbar__thumb {
  fill: transparent;
  --strokeDasharray: calc(2 * var(--total) * var(--percent) / 100) calc(2 * var(--total));
  stroke-linecap: round;
  stroke-dasharray: var(--strokeDasharray);
  stroke: var(--color);
  stroke-width: var(--strokeWidth);
  transform-origin: center;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
<svg class="progressbar" viewBox="0 0 62 80">
    <circle class="progressbar__track" cx="31" cy="31"></circle>
    <circle class="progressbar__thumb" cx="31" cy="31"></circle>
    <text x="32" y="33" class="progressbar__percent" text-anchor="middle" dominant-baseline="middle"><tspan>0</tspan>%</text>
    <text x="32" y="73" class="progressbar__info" text-anchor="middle" dominant-baseline="middle"><tspan>Загрузочка ...</tspan></text>
</svg>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

→ Ссылка