Progress bar circle on js

#javascript #html #css #svg #svg_animation

Написал скрипт, для круглого прогресс бара с помощью SVG, на чистом js.
Но не учел тот факт, что мне нужно еще и текст внутри этого круга сделать. Поискал
в инете, и не нашел.
 А вот сделать с обычными div'ами у меня не получается. Не получается  начинать прогресс
с определенной точки и заканчивать соответственно тоже в определенной точке.

Вот мой код, который с svg: 



function setProgress(percent) {
  const circle = document.getElementById(`circle`);
  const radius = circle.r.baseVal.value;
  const circumference = 2 * Math.PI * radius;

  circle.style.strokeDasharray = `${circumference} ${circumference}`;
  circle.style.strokeDashoffset = circumference;
  const offset = circumference - percent / 10 * circumference;
  circle.style.strokeDashoffset = offset;
}
setProgress(7);
.svg_circle_loader {
  background: none;
  border: none;
  margin: none;
  padding: none;
}

.circle_loader {
  fill: none;
  stroke: #FFB10A;
  stroke-width: 10px;
  transition: all 0.2s linear;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset .5s;
}




    

Ответы

Ответ 1

Как-то так?



const circumference = 2 * Math.PI * circle.r.baseVal.value;
circle.style.strokeDasharray = `${circumference} 1000`;

function setProgress(percent) {
  circle.style.strokeDashoffset = circumference * (1 - percent / 100);
  pct.innerHTML = percent.toFixed(0) + '%';
}

requestAnimationFrame(draw)

function draw(t) {
  requestAnimationFrame(draw)
  setProgress((t/100)%100)
}
.circle_loader {
  fill: none;
  stroke: #FFB10A;
  stroke-width: 10px;
  transform-origin: center;
  transform: rotate(-90deg);
}

text {
  dominant-baseline:middle;
  text-anchor:middle;
  font-size:30px;
  font-family:Arial;
}