Question

我正在尝试为我的圆圈进度条设置动画，但很难找到正确的代码。下面是我的 jQuery 代码：

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

以下是 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>

我尝试过航点和 AOS，但无济于事。我正在尝试将其编码为无限循环，甚至在滚动时设置动画。我是 HTML 和 jQuery 的新手。

仅在滚动时播放动画 - 圆形进度条

0 个答案: