Completion of bar progress with the required percentage
-
There's progress on the bar. It's going from 55% to 100%, but it's like it's a 0% round.
How do you do anything properly?
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>
-
♪ https://progressbarjs.readthedocs.io/en/latest/api/shape/#setprogress It says how to set an initial percentage of progress.
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>
