Play animation only when scroll over - circle progress bar

I am trying to animate my circle progress bars but struggling to find the correct code. Below is my jQuery code:

<script>
  let options = {
    startAngle: -1.55,
    size: 150,
    value: 0.80,
    fill: {gradient: ['#a445b2', '#fa4299']}
  }
  $(".circle .bar").circleProgress(options).on('circle-animation-progress',
  function(event, progress, stepValue){
    $(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
  });
  $(".css .bar").circleProgress({
    value: 0.80
  });
  $(".js .bar").circleProgress({
    value: 0.70
  });
  $(".ps .bar").circleProgress({
    value: 0.85
  });
  $(".pp .bar").circleProgress({
    value: 0.80
  });
  $(".sql .bar").circleProgress({
    value: 0.65
  });
</script>

Below is the HTML:

      <div class="card">
        <div class="circle">
          <div class="bar"></div>
          <div class="box"><span></span></div>
        </div>
        <div class="text">HTML</div>
      </div>
      <div class="card css">
        <div class="circle">
          <div class="bar"></div>
          <div class="box"><span></span></div>
        </div>
        <div class="text">CSS</div>
      </div>
      <div class="card js">
        <div class="circle">
          <div class="bar"></div>
          <div class="box"><span></span></div>
        </div>
        <div class="text">Javascript</div>
      </div>
      <div class="card ps">
        <div class="circle">
          <div class="bar"></div>
          <div class="box"><span></span></div>
        </div>
        <div class="text">Photoshop</div>
      </div>
      <div class="card pp">
        <div class="circle">
          <div class="bar"></div>
          <div class="box"><span></span></div>
        </div>
        <div class="text">Premiere Pro</div>
      </div>
      <div class="card sql">
        <div class="circle">
          <div class="bar"></div>
          <div class="box"><span></span></div>
        </div>
        <div class="text">MySQL</div>
      </div>

I have tried waypoints and AOS but to no avail. I am trying to code it to loop in infinite, and even animate on scroll. I am new to HTML & jQuery.