JSFiddle - React, Tailwind, and code Playground

HTML

<progress max="100" value="0" id="bar"></progress>

<select id="monsters">
  <option>Fly</option>
  <option>Mouse</option>
  <option>Rat</option>
  <option>Rabbid Rabbit</option>
  <option>Baby Ent</option>
  <option>Murloc</option>
  <option>Ent</option>
</select>

<button type="button" id="battle">Battle!</button>

<p id="dam">

</p>

CSS

body {
  background-color: #000;
}

progress {
   appearance: none;
   -webkit-appearance: none;
   width: 100%;
}

progress[value]::-webkit-progress-bar {
  background-color: #000;
  border: 1px solid #81ff14;
  border-radius: 5%;
}

progress[value]::-webkit-progress-value {
  color: #81ff14;
}

select {
  background-color: rgba(0, 0, 0, 0);
  border-color: #81ff14;
  color: #81ff14;
  margin-left: 100px;
  margin-top: 15px;
}

button {
  background-color: rgba(0, 0, 0, 0);
  border-color: #81ff14;
  color: #81ff14;
  border-radius: 10%;
  float: right;
  margin-right: 100px;
  margin-top: 15px;
}

#dam {
  color: #81ff14;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 60%;
  text-align: center;
  float: right;
  margin-top: 40px;
}

JavaScript 1.7

var progress = function(sec){
		var interval = 25000;//milliseconds
		setTimeout(function(){
	    sec = sec+25;
			$('#bar').val(sec);
			if(sec < 100)
				progress(sec);//call self with new value
		},interval)
}

$('#battle').click(function() {
	$('#dam').html("You have hit the " + $('#monsters').val() + " for 9 damage");
  /*$('#bar').val(25).delay(1000);
  $('#bar').val(50).delay(1000);
  $('#bar').val(75).delay(1000);
  $('#bar').val(100);*/
	progress(0);//initialize progress bar
});