如何实现进度条图表动画播放完成后停顿3-5秒再循环重复

核心逻辑是把单次动画逻辑抽离为可复用函数，动画执行完成后重置状态，等待指定间隔后重新触发执行：

• 抽离动画核心逻辑为独立函数，避免代码冗余
• 每次动画启动前先重置进度条宽度、计数器数值，同时避免重复生成计数标签
• 监听计数器动画完成事件，所有动画结束后等待4秒（可按需调整为3-5秒任意值）重新触发动画

修改后完整代码如下：

// 动画间隔等待时间，单位毫秒，这里设为4000即4秒，可自行调整为3000-5000
const LOOP_DELAY = 4000;

function runProgressAnimation() {
  // 先重置所有进度条状态，避免重复添加.count元素
  $('.bar').css('width', '0%').find('.count').remove();

  $('.bar').each(function(i){  
    var $bar = $(this);
    $(this).append('<span class="count"></span>')
    setTimeout(function(){
      $bar.css('width', $bar.attr('data-percent'));      
    }, i*100);
  });

  // 记录总共有多少个计数器，用来判断所有动画是否完成
  const totalCount = $('.count').length;
  let finishedCount = 0;

  $('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).parent('.bar').attr('data-percent')
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now) +'%');
        },
        complete: function() {
          finishedCount++;
          // 所有计数器动画都执行完成后，等待指定时间重新触发动画
          if (finishedCount === totalCount) {
            setTimeout(runProgressAnimation, LOOP_DELAY);
          }
        }
    });
  });
}

// 页面加载后500毫秒启动第一次动画
setTimeout(runProgressAnimation, 500);

内容的提问来源于stack exchange，提问作者Jasmine