jquery-circle-progress icon indicating copy to clipboard operation
jquery-circle-progress copied to clipboard

Progress Bar is moving faster than percentage

Open RailsCod3rFuture opened this issue 4 years ago • 1 comments

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

RailsCod3rFuture avatar Jul 29 '19 20:07 RailsCod3rFuture

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.

anisalibegic avatar Jan 22 '20 12:01 anisalibegic