Super simple progress bar using CSS variables

css-simple-progress-bar.md

A working demo

The CSS:

.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;
}

.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%);
}

The HTML:

<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;">
  <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>

#simple-bar-one uses the default values, and it will render like:

If we update it to style="--barCurrent: 78;", it will render like:

#simple-bar-two uses the simpleBar--gold style and has 10000 as --barMax, so if we want to render a bar with the same width as #simple-bar-one we should update the style to style="--barMax: 10000; --barCurrent: 7800" and it will render like:

#simple-bar-three will render like:

The values can be updated with JS, the nice thing is that the JS won't be responsible for changing the styles directly, it only has to update the value of --barCurrent or --barMax accordingly. CSS will be the one doing the hardwork :)

let one = document.querySelector('#simple-bar-one')
let two = document.querySelector('#simple-bar-two')
let three = document.querySelector('#simple-bar-three')

one.style.setProperty('--barCurrent', 78)

two.style.setProperty('--barCurrent', 7800)

three.style.setProperty('--barCurrent', 0.42)

// it is possible to change --barMax as well:
three.style.setProperty('--barMax', 666)