How to animate circular progress bar on page scroll down

Question

I have a circular progress bar that animates when the page loads, but I want it to animate when the user scrolls down to it, as it will be in the middle of the page. Right now if the page loads, the user does not see the animation.

So essentially, the animation should be paused until the user scrolls down to a certain point, once the bar is in view, the animation starts.

I used this jquery plugin https://www.jqueryscript.net/loading/jQuery-Plugin-SVG-Progress-Circle.html

function makesvg(percentage, inner_text = "") {
    var abs_percentage = Math.abs(percentage).toString();
    var percentage_str = percentage.toString();
    var classes = ""
    if (percentage < 0) {
        classes = "danger-stroke circle-chart__circle--negative";
    } else if (percentage > 0 && percentage <= 30) {
        classes = "warning-stroke";
    } else {
        classes = "success-stroke";
    }
    var svg = '<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" 
    xmlns = "http://www.w3.org/2000/svg" > ' +
    '<circle class="circle-chart__background" cx="16.9" cy="16.9" r="15.9"  / >
    ' +
    '<circle class="circle-chart__circle ' + classes + '"' +
        'stroke-dasharray="' + abs_percentage + ',100"    cx="16.9" cy="16.9" 
    r = "15.9" / > ' +
    '<g class="circle-chart__info">' +
    '   <text style="color:#fff;" class="circle-chart__percent" x="17.9" 
    y = "15.5" > '+percentage_str+' % < /text>';
    if (inner_text) {
        svg += '<text class="circle-chart__subline" x="16.91549431" 
        y = "22" > '+inner_text+' < /text>'
    }
    svg += ' </g></svg>';
    return svg
}

(function($) {
    $.fn.circlechart = function() {
        this.each(function() {
            var percentage = $(this).data("percentage");
            var inner_text = $(this).text();
            var inner_text2 = $(this).text();
            $(this).html(makesvg(percentage, inner_text));
        });
        return this;
    };
});

$('.circlechart').circlechart(); // Initialization

after the animation start and user scroll down further where this upload progress bar is not visible, should animation stop or once it began showing animation it should continue till it reaches 100%. — Sandeep Garg, May 18 '19 at 05:32
I only want that when user scroll down to middle section only then animation starts @Sandeep Garg — varun _developer, May 18 '19 at 05:44
This is clear when to start the animation, I wanted to know after the animation starts, and meanwhile progress bar began to fill, and in the meantime, if user scrolls up or down such that the progress bar is now not visible, the animation needs to stop where it was or it should continue progressing — Sandeep Garg, May 18 '19 at 05:47

score 0 · Answer 1 · answered May 18 '19 at 06:14

Checkout answer of Dan With reference to answer of Dan, I am adding code that you can use to start/stop animation of circular progress bar

function onVisibilityChange(el, callback) {
    var old_visible;
    return function () {
        var visible = isElementInViewport(el);
        if (visible != old_visible) {
            old_visible = visible;
            if (typeof callback == 'function') {
                callback(visible);
            }
        }
    }
}
var percentage = 0;
var handler = onVisibilityChange(el, function(visiblity_status) {
    /* your code go here */
    if (visibility_status) {
     if (percentage == 0) {
       $('.circlechart').circlechart(); 
     } else {
        // Code to resume progress bar if there is any method defined for the plugin you are using.
     }

    } else {
        // Code to stop progress bar if there is any method to stop it.
    }
});


//jQuery
$(window).on('DOMContentLoaded load resize scroll', handler);

did u implement `isElementInViewport` function written in reference answer of Dan I gave in answer. — Sandeep Garg, May 18 '19 at 06:34
Please check [CodePen](https://codepen.io/anon/pen/NVgzRa?editors=1111) I have created. With this reference you can get some help in achieving what you want. — Sandeep Garg, May 18 '19 at 07:18
@ Sandeep Garg it wroks good but when you scroll up and down it copied the text. Please check screenshot https://nimb.ws/Xf28sv — varun _developer, May 20 '19 at 10:24

How to animate circular progress bar on page scroll down

1 Answers1

Linked