How to animate circular progress bar on page scroll down

12
May 18, 2019, at 2:30 PM

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
Answer 1

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); 
READ ALSO
Adding a Popup box for Winner of Game

Adding a Popup box for Winner of Game

I have been trying to add a popup box for my rock paper scissors game so that the program will display the winner when the game is overI have a function file and a file with the main code

52
Can I map a function with more then one argument?

Can I map a function with more then one argument?

In EE (Google Earth Engine Javascript API) I can do

21
import array of objects with a module as a property returns undefined when import twice

import array of objects with a module as a property returns undefined when import twice

I'm trying to import an array of objects that has a module as a propertyThe first file that imports the object has no problem, but the second one has undefined

41
I need to make this canvas transparent but none of the solutions are working

I need to make this canvas transparent but none of the solutions are working

i tried all the juery tricks and also the css tricks but none of them worki dont really know anything about canvas but trying to solve this for a day now

20