JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div class="bar-container energy-bar-container">
    <div class="bar-background energy-bar" style="width:50%">
    
    </div>
    Energy (<div class="energy-amount" style="display:inline-block">50</div> / 100)
</div>
<div class="bar-container brave-bar-container">
    <div class="bar-background brave-bar" style="width:40%">
    
    </div>
    Brave (<div class="brave-amount" style="display:inline-block">40</div> / 100)
</div>
<div class="bar-container will-bar-container">
    <div class="bar-background will-bar" style="width:60%">
    
    </div>
    Will (<div class="energy-amount" style="display:inline-block">60</div> / 100)
</div>

CSS

.bar-container {
  width:200px;
  border:solid 1px black;
  margin-bottom:4px;
  text-align:center;
  position:relative;
  padding:4px 0;
  font-size:13px;
  font-weight:bold;
  font-family: sans-serif;
}

.bar-background {
  position:absolute;
  background-color: red;
  top:0;
  left:0;
  bottom:0;
  opacity:0.5;
  z-index:-1;
}

JavaScript

function incrementEnergy() {
		let container = document.querySelector('.energy-bar-container').clientWidth;
    let filled = document.querySelector('.energy-bar').clientWidth;
    let single = Math.ceil(container / filled);
    let percent = Math.ceil((filled / container) * 100)

    if (percent < 100) {
    		setTimeout(function() {
          document.querySelector('.energy-bar').style.width = ((percent + 1) * single) + 'px';
          document.querySelector('.energy-amount').innerHTML = (percent + 1);

          incrementEnergy();
        }, 1000);
    }
}

incrementEnergy();