私が歌川です

@utgwkk が書いている

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

技術

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

<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);
})();

あわせて読みたい