Animation: overallProgress property

A number between 0 and 1, or null if the animation lacks a timeline, is inactive or hasn't been played yet, or if its currentTime is set to a non-time value.

If the animation's iterations property is set to Infinity, or if its currentTime is set to a negative value, overallProgress will return 0.

If the animation's duration is set to 0, overallProgress will return 1.

This demo uses overallProgress to create a "percentage progress" readout, which is displayed to the screen while an animation runs.

The HTML contains a <button> to press to start the animation, a <p> element in which to display the percentage progress, and a <div> that will be animated.

<button>Run animation</button>
<p class="progress">Progress: 0%</p>
<div class="box"></div>

The demo's CSS provides some rudimentary styling, which is not important for understanding how the JavaScript works, therefore we have hidden it for brevity.

* {
  box-sizing: border-box;
}

html {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.progress {
  font-weight: bold;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 40px 20px;
  border: 10px solid black;
  background: lightseagreen;
  margin: 0 auto;
}

In the JavaScript, we start off by grabbing references to the <button>, <p>, and <div> elements.

We then create:

• an animation variable which will reference the animation, once we've created it
• a keyframes array
• an options object containing timing properties.

const btn = document.querySelector("button");
const progress = document.querySelector(".progress");
const box = document.querySelector(".box");

let animation;

const keyframes = [{ rotate: "0deg" }, { rotate: "360deg" }];

const timingProps = {
  duration: 3000,
  iterations: 1,
};

Next we add a "click" event listener to the <button> via addEventListener() so that, when pressed, it:

1. Starts the animation running using Element.animate(), passing it the keyframes and options defined earlier and assigning the returned Animation instance to the animation variable.
2. Runs a function called updateProgress() via the requestAnimationFrame() method, which handles updating the percentage process display.

btn.addEventListener("click", () => {
  // Animate the box
  animation = box.animate(keyframes, timingProps);
  // Start updating the progress percentage via rAF()
  requestAnimationFrame(updateProgress);
});

Now let's define the updateProgress() function. This queries Animation.playState to see if the animation is not finished. If it isn't finished, we grab the current value of overallProgress, multiplying it by 100 and rounding the result down to convert it to a whole percentage number, then update the <p> element's textContent value with it. We then call requestAnimationFrame(updateProgress) again to re-run the progress percentage update.

If the animation is finished, we replace the percentage progress with a "Finished!" message, and don't call requestAnimationFrame(updateProgress), so the progress percentage updates stop.

function updateProgress() {
  // Check if the animation is finished
  if (animation.playState !== "finished") {
    // Convert overallProgress to a whole number percentage
    const progressPercentage = Math.floor(animation.overallProgress * 100);
    // Update the progress paragraph with the percentage
    progress.textContent = `Progress: ${progressPercentage}%`;
    // Only request the next frame if the animation is not finished
    requestAnimationFrame(updateProgress);
  } else {
    progress.textContent = "Finished!";
  }
}

The output looks like this. Try pressing the button to see the animation and associated progress indicator run.

• Animation for other methods and properties you can use to control web page animation.
• Web Animations API