процент для каждого блока работает но насчет реализации сомневаюсь

const percentSpan = document.querySelectorAll('.percent')
class Calc {
  constructor(percent, block) {
      this.percent = percent
      this.block = block
    }
    * calculate() {
      for (let i = 0; i <= this.percent; i++) {
        yield this.block.textContent = i
      }
    }
}
const percent = [50, 66, 12, 33]
const calcArr = [...percentSpan].map((elem, i) => {
  return new Calc(percent[i], elem).calculate()
})

let inter = setInterval(() => {
  let next = 0
  for (let key of calcArr) {
    next = key.next()
    if (next.value == Math.max(...percent)) {
      clearInterval(inter)
    }
  }
}, 100);

<span class="percent"></span>
<span class="percent"></span>
<span class="percent"></span>
<span class="percent"></span>