progressを動的に動かしてHPゲージを実装するサンプル

HTML

<progress id="lifeBar" value="0" max="100" min="0" optimum="100"></progress>

CSS

#lifeBar{
  display: inline-block;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  vertical-align: -0.2em;
}

#lifeBar::-webkit-progress-bar {
	background: #ccc;
}

#lifeBar::-webkit-progress-value {
  background-color: #00cc00;
}

JavaScript

let lifeBar = document.getElementById('lifeBar');

function update() {
gameTimer = setTimeout(update, 50);
lifeBar.value++;
  
//最大値に達したらループ終了
if(lifeBar.value >= lifeBar.max){
clearTimeout(gameTimer);
}
  
}

update();