JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>

<div id="gap">Scroll down to activate animation</div>
<div id="privacy-score-circle"></div>

CSS

#gap {
    height: 500px
}
#privacy-score-circle {
    margin: auto;
    width: 200px;
    height: 200px;
    position: relative
}

JavaScript

var bar;

function privacyScoreCircle() {
    // progressbar.js circle
    bar = new ProgressBar.Circle(document.getElementById('privacy-score-circle'), {
        color: '#ddd',
        // This has to be the same size as the maximum width to
        // prevent clipping
        strokeWidth: 4,
        trailWidth: 4,
        easing: 'easeInOut',
        duration: 1400,
        text: {
            autoStyleContainer: false
        },
        from: {
            color: '#ddd',
            width: 4
        },
        to: {
            color: '#888',
            width: 4
        },
        // Set default step function for all animate calls
        step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
            circle.path.setAttribute('stroke-width', state.width);

            var value = Math.round(circle.value() * 100);
            if (value === 0) {
                circle.setText('');
            } else {
                circle.setText(value + '%');
            }
        }
    });

    bar.text.style.fontFamily = '"Montserrat", sans-serif';
    bar.text.style.fontSize = '1.7rem';
    bar.trail.setAttribute('stroke-linecap', 'round');
    bar.path.setAttribute('stroke-linecap', 'round');
    //bar.animate(0.97); // <-- ANIMATION CAN BE TRIGGERED INSTANTLY USING THIS
}

privacyScoreCircle();

// Check if element is scrolled into view
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

window.onscroll = function() {
    if (isScrolledIntoView($('#privacy-score-circle'))) bar.animate(0.97);
    else bar.animate(0); // or bar.set(0)
}