Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Progress Bar is moving faster than percentage #201

Open
RailsCod3rFuture opened this issue Jul 29, 2019 · 1 comment
Open

Progress Bar is moving faster than percentage #201

RailsCod3rFuture opened this issue Jul 29, 2019 · 1 comment

Comments

@RailsCod3rFuture
Copy link

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>');
        });
});
@anisalibegic
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants