Progress bar circle on js

Question

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

score 7 · Accepted Answer · answered Jul 20 '19 at 21:57

7

Как-то так?

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>

answered Jul 20 '19 at 21:57

Stranger in the Q

56,055

У меня почему-то она не так плавно переходит. Это первая проблема. А вторая: как к примеру передать в функцию число 8, и заполняющая линия(желтая) дошла до 8 из 10? Можете подсказать? – Евгений Jul 21 '19 at 15:18
Хотя первую я уже решил. Осталось вторую решить) – Евгений Jul 21 '19 at 15:27
@Евгений моя функция принимает % от 0 до 100, соответственно для того чтобы получить 1/8 круга надо передать 80 – Stranger in the Q Jul 21 '19 at 15:28
А как сделать чтоб отсчет был от нуля и до 10, а не до 100? И к примеру передать значение и чтоб функци на этом и остановилась, чтоб не начиналась заново как у вас? – Евгений Jul 21 '19 at 15:37
@Евгений моя начинается заново, потому что тестовая функция мотает входные аргументы в зависимости от времени, т.е. бесконечно по кругу, отвечая на вас первый вопрос - в коде надо поделить на 10 а не на 100 (circumference * (1 - percent / 10)) – Stranger in the Q Jul 21 '19 at 15:39
Ага.. разобрался. спасибо – Евгений Jul 21 '19 at 15:52

Progress bar circle on js

1 Answers1

Linked