Заполнение круга в прогресс баре с нужного процента

Question

Есть прогресс бар. Он идёт с 55% до 100%, но круг заполняется как будто с 0%.

Как сделать что бы заполнялся должным образом?

let circle = null
const text = document.querySelector('.text');

function refreshCircle(percentage) {
  if (!circle) {
    circle = new ProgressBar.Circle(container, {
      color: '#000',
      // This has to be the same size as the maximum width to
      // prevent clipping
      strokeWidth: 4,
      trailWidth: 10,
      easing: 'easeInOut',
      duration: 6000,
      text: {
        autoStyleContainer: false
      },
      from: {
        color: '#ff9a89',
        width: 10
      },
      to: {
        color: '##ff9a89',
        width: 10
      },
      // Set default step function for all animate calls
      step(state, circle) {
        circle.path.setAttribute('stroke', state.color);
        circle.path.setAttribute('stroke-width', state.width);

        const value = Math.round(circle.value() * 100 + 55);

        if (value >= 55 && value <= 71) {
          circle.setText(value);
          text.innerHTML = 'Адаптация плана Марафона к Вашему плотному графику';
        }

        if (value >= 72 && value <= 89) {
          circle.setText(value);
          text.innerHTML = 'Подбор подходящих Вам рецептов и тренировок';
        }
        if (value >= 90 && value <= 100) {
          circle.setText(value);
          text.innerHTML = 'Ваша индивидуальная программа похудения готова!';
        }

      }
    });
    circle.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
    circle.text.style.fontSize = '3rem';
  }

  circle.animate(percentage);
}

refreshCircle(0.55)
setTimeout(() => refreshCircle(1.0), 3000)

#container {
  position: relative;
  width: 200px;
  height: 200px;
}

.wrapper {
  width: 200px;
  height: 200px;
  text-align: center;
  position: relative;
}

.text {
  font-size: 30px;
  line-height: 2.14;
  text-align: center;
  text-transform: capitalize;
  color: #000000;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">

<div class="wrapper">
  <div id="container"></div>
  <div class="text"></div>
</div>

Answer 1

В документации написано, как установить начальный % прогресса.

const text = document.querySelector('.text');

const circle = new ProgressBar.Circle(container, {
  color: '#000',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 10,
  easing: 'easeInOut',
  duration: 6000,
  text: {
    autoStyleContainer: false
  },
  from: {
    color: '#ff9a89',
    width: 10
  },
  to: {
    color: '##ff9a89',
    width: 10
  },
  // Set default step function for all animate calls
  step(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    const value = Math.round(circle.value() * 100);

    if (value >= 0 && value <= 71) {
      circle.setText(`${value}%`);
      text.innerHTML = 'Адаптация плана Марафона к Вашему плотному графику';
    }

    if (value >= 72 && value <= 89) {
      circle.setText(`${value}%`);
      text.innerHTML = 'Подбор подходящих Вам рецептов и тренировок';
    }
    if (value >= 90 && value <= 100) {
      circle.setText(`${value}%`);
      text.innerHTML = 'Ваша индивидуальная программа похудения готова!';
    }
  }
});

function refreshCircle(percentage, from = 0) { // если не задано значение, начинаем с 0%
  circle.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  circle.text.style.fontSize = '3rem';
  const progress = from / 100;
  circle.set(progress);
  circle.animate(percentage);
}

refreshCircle(1.0, 55) // второй параметр - % начала прогресса

#container {
  position: relative;
  width: 200px;
  height: 200px;
}

.wrapper {
  width: 200px;
  height: 200px;
  text-align: center;
  position: relative;
}

.text {
  font-size: 30px;
  line-height: 2.14;
  text-align: center;
  text-transform: capitalize;
  color: #000000;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">

<div class="wrapper">
  <div id="container"></div>
  <div class="text"></div>
</div>

БЛОГ НА HUSL

Заполнение круга в прогресс баре с нужного процента

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