Прогресс бар включался только при активном div

Есть сайт квиз, на квизе №17(но точнее в квизе так скажем 21 страниц, которые находятся на одной странице, это же квиз) установлен прогресс бар

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); 
        

        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='Ваша индивидуальная программа похудения готова!';
        }

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

  circle.animate(percentage);
}

refreshCircle(0.75)
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>

повторюсь на странице 17, проблема в том, что при загрузке страницы сайта загружается весь квиз, а точнее все его страницы и при переходе на каждую страницу квиза, она уже загружена, и поэтому когда я дохожу до 17 квиза прогресс бар уже прогружен, вот и вопрос как быть, вижу что когда на каждую страницу квиза перехожу, она помечается как div класс active, и я подумал может как то можно привязать этот div класс к js квиза, что бы когда div класс переключался в active, прогресс ар срабатывал?


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