JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div>
      <!-- start a skill -->
      <label>Bar 1</label>
      <progress class="progressBars" value="0" max = "90"></progress>
      
      <br>
      
      <label>Bar 2</label>
      <progress class="progressBars" value="0" max = "35"></progress>
      
      <br>
      
      <label>Bar 3</label>
      <progress class="progressBars" value="0" max = "35"></progress>
      
      <br>

</div>

CSS

progress {
  width: 500px;
}
progress::-webkit-progress-bar{
  background-color: gray;
}
progress::-webkit-progress-value{
  background-color: green;
}

JavaScript

var index = 0;
var id;

let bars = document.getElementsByClassName(`progressBars`);

this.id = setInterval(() => {
  increaseProgress(bars[this.index])    
}, 10 );


function increaseProgress(bar) {
debugger;
  if (bar.value < bar.max) bar.value++;
  else {
  	clearInterval(this.id);
    bar.value++;
  }
}