jquery-circle-progress
jquery-circle-progress copied to clipboard
Progress Bar is moving faster than percentage
For some odd reason, the progress percentage tracker is working correctly, but the progress bar is much faster. How do you slow it down to match each other by increments??
Example below:
// Current Progress Bar 1 JS
let current_progress_value = 0;
$('.second.circle').circleProgress({
fill: {color: 'blue'},
value: 0.0,
size: 150,
startAngle: -Math.PI / 2,
animationStartValue: 0,
stepValue: current_progress_value
}).on('circle-animation-progress', function (event, progress) {
$('#applicant_signature').one('keyup', function () {
$('.second.circle').circleProgress({value: current_progress_value += 0.1});
$('.second.circle').circleProgress('redraw');
$('.second.circle').circleProgress();
$('.second.circle').circleProgress({size: 150});
});
$('#applicant_signature').one('keyup', function () {
if ($('#applicant_signature').val() == '') {
$('.second.circle').circleProgress({value: current_progress_value -= 0.1});
$('.second.circle').circleProgress('redraw');
$('.second.circle').circleProgress();
$('.second.circle').circleProgress({size: 150});
}
});
$(this).find('strong').html(Math.round((current_progress_value * progress) / 20) + '<i>%</i>');
$('.second.circle').circleProgress({
fill: {color: 'blue'},
value: 0.0,
size: 150,
startAngle: -Math.PI / 2,
animationStartValue: 0,
stepValue: current_progress_value
}).on('circle-animation-end', function (event) {
if ($('.circle').circleProgress('value') === 0) {
$('.circle').circleProgress({value: 0});
$('.circle').circleProgress('redraw');
$('.circle').circleProgress();
$('.circle').circleProgress({size: 150});
}
$(this).find('strong').html(Math.round((current_progress_value * progress) / 20) + '<i>%</i>');
});
});
Don't use progress from on('circle-animation-progress', function (event, progress). Add another parameter to the callback which will be stepValue and use it instead of progress.
on('circle-animation-progress', function (event, progress, stepValue).
progress is for animation progress while stepValue is for current progress value.