Progress bar circle on js

100

17 апреля 2021, 07:30

Написал скрипт, для круглого прогресс бара с помощью 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; 
}

<svg class="svg_circle_loader" width="200" height="200"> 
      <circle cx="100" cy="100" r="50" class="circle_loader" id="circle"></circle> <!-- #74563F --> 
    </svg>

Answer 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; 
}

<svg class="svg_circle_loader" width="200" height="200"> 
  <circle cx="100" cy="100" r="50" class="circle_loader" id="circle"></circle> 
  <text x="100" y="100" id="pct" ></text> 
</svg>