CSS Simple Progress Bar

Simple progress bars using CSS variables

HTML

<div class="stack" style="width: 66%;">

  <h1>Click on the bars to randomize the values</h1>
  
  <div id="simple-bar-one" class="simpleBar">
    <div class="simpleBar__progress"></div>
  </div>

  <div id="simple-bar-two" class="simpleBar simpleBar--gold" style="--barMax: 10000; --barCurrent: 7800;">
    <div class="simpleBar__progress"></div>
  </div>

  <div id="simple-bar-three" class="simpleBar simpleBar--red" style="--barMax: 1; --barCurrent: 0.42;">
    <div class="simpleBar__progress"></div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.stack > * + * {
  margin-top: 16px;
}

h1 {
  font-size: 3ex;
}

.simpleBar {
  --barMax: 100;
  --barCurrent: 0;
  display: block;
  width: 100%;
  height: 20px;
  border: 3px double hsl(210, 9%, 31%);
  background: hsl(210, 9%, 31%);
  overflow: hidden;
  cursor: pointer;
}

.simpleBar__progress {
  display: block;
  width: calc(var(--barCurrent) * 100% / var(--barMax));
  height: 100%;
  background: hsl(120, 54%, 45%);
  border-right: 2px solid hsl(120, 54%, 35%);
  border-top: 1px solid hsl(120, 54%, 80%);
  transition: width .4s ease-out;
}

.simpleBar--gold > .simpleBar__progress {
  background: hsl(46, 86%, 52%);
  border-right-color: hsl(46, 86%, 35%);
  border-top-color: hsl(46, 86%, 80%);
}

.simpleBar--red > .simpleBar__progress {
  background: hsl(354, 78%, 44%);
  border-right-color: hsl(354, 78%, 35%);
  border-top-color: hsl(354, 78%, 80%);
}

JavaScript

function randomFloat(min, max) {
	return min + (max - min) * Math.random();
}

document.addEventListener('click', function(event) {
  bar = event.target.closest('.simpleBar')
  if (!bar) return
  
  max = parseFloat(bar.style.getPropertyValue('--barMax') || 100) 

	bar.style.setProperty('--barCurrent', randomFloat(0, max))
})