JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
<script>
(function customProgressBarIIFE(){
	Array.prototype.slice.apply(document.querySelectorAll('custom-progress-bar'))
  	.forEach(updateBar);
  
  function updateBar(cbar){
  	if (cbar.children.length === 0){
    	cbar.innerHTML = '<bar></bar><label></label>';
    }
    var percentage = cbar.progress === null ? '0%' : cbar.progress + '%';
    cbar.querySelector('bar').style.width = percentage;
    cbar.querySelector('label').innerHTML = percentage;
  }
  setTimeout(customProgressBarIIFE, 50);
}());
</script>

<custom-progress-bar></custom-progress-bar>

<script>
for (let i = 0; i <= 10; i++) {
    setTimeout(((i) => document.querySelector('custom-progress-bar').progress = i * 10).bind(this, i), i * 100);
}
</script>
</body>
</html>

CSS

custom-progress-bar { position: relative; display: inline-block; width: 5rem; height: 1.2rem; border: solid 1px #000;  }
custom-progress-bar > label {  display: inline-block; position: absolute; width: 100%; text-align: center; font-size: 0.8rem;  z-index: 2; }
custom-progress-bar > bar { display: inline-block; background: #9cf; height: 100%;  position: absolute; z-index: 1; box-shadow: inset 0 0 0 1px #fff;}