https://blog.utgw.net/entry/2022/02/24/191345

表題のことに気づいたのでシェアーします。

<div style="width: 100%; height: 20px; border: 1px solid black;" id="linear-gradient-progress-bar">
</div>

(() => {
  let progress = 0;
  const maxProgress = 1000;

  window.setInterval(() => {
    const progressPercentage = progress / maxProgress * 100;
    document.querySelector('#linear-gradient-progress-bar').style.background = `linear-gradient(to right, yellow ${progressPercentage}%, white ${progressPercentage}% 100%)`;
    progress = (progress + 1) % maxProgress;
  }, 50);
})();

linear-gradientでCSSでプログレスバーが書ける

あわせて読みたい