Прогресс бар включался только при активном 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, прогресс ар срабатывал?