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.