3

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

1 ответ 1

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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.