这是我想到的。基本上它的工作原理是创建一个包含每个进度条的规范的对象数组。然后循环这些规范并开始每个Interval。

let progression = [
                    {
                      progressBarId: "first",
                      progressBarLabelId: "first_label",
                      startValue: 0,
                      endValue: 50,
                      duration: 20
                    },
                    {
                      progressBarId: "second",
                      progressBarLabelId: "second_label",
                      startValue: 10,
                      endValue: 100,
                      duration: 10
                    },
                    {
                      progressBarId: "third",
                      progressBarLabelId: "third_label",
                      startValue: 50,
                      endValue: 80,
                      duration: 20
                    }
                  ];
                  
window.onload = function() {

  for(var i = 0; i < progression.length; i++) {
    let firstLayer = document.getElementById(progression[i].progressBarId),
    secondLayer = document.getElementById(progression[i].progressBarLabelId),
    startValue = progression[i].startValue,
    endValue = progression[i].endValue,
    duration = progression[i].duration;
  
  
    let progress = setInterval(() => {
      startValue++
      secondLayer.textContent = `${startValue}%`
      firstLayer.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)`
      if (startValue == endValue) {
        clearInterval(progress)
      }
    }, duration);

  }

}

.cardHolder {
  display: flex;
  justify-content: center;
  align-items: center;
  background: conic-gradient(rgb(15, 176, 6) 3.6deg, rgb(193, 193, 193) 0deg);
  width: 100px;
  height: 100px;
  border-radius: 100%;
}

.skillFirst {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #90697a;
  width: 80%;
  height: 80%;
  border-radius: 100%;
}

.skillSecond {
  font-family: 'Montserrat Subrayada', sans-serif;
  font-size: 24px;
}

<div class="cardHolder" id="first">
  <div class="skillFirst">
    <div class="skillSecond" id="first_label">
      <span class="skillContent" ></span>
    </div>
  </div>
</div>

<div class="cardHolder" id="second">
  <div class="skillFirst">
    <div class="skillSecond" id="second_label">
      <span class="skillContent" ></span>
    </div>
  </div>
</div>

<div class="cardHolder" id="third">
  <div class="skillFirst">
    <div class="skillSecond" id="third_label">
      <span class="skillContent" ></span>
    </div>
  </div>
</div>

希望这有帮助，如果没有，请评论！