requestAnimationFrame

requestAnimationFrame.js

// <progress id="elem" style="width: 5%;" onclick="anim.start()"></progress>

  class Animation {
        constructor({draw, duration}) {
          this.draw = draw;
          this.duration = duration;
        }

        animate(time) {

          let timeFraction = (time - this.startAnition) / this.duration;
          if (timeFraction > 1) timeFraction = 1;
          
          this.draw(timeFraction);

          if (timeFraction < 1) {
            requestAnimationFrame(this.animate.bind(this))
          }

        }
        start() {
          this.startAnition = performance.now()
          requestAnimationFrame(this.animate.bind(this))
        }
      }

      let anim = new Animation({
        draw: function(progress) {
          document.querySelector("#elem").style.width = progress * 100 + "%";
        },
        duration: 1000
      });