JSFiddle - React, Tailwind, and code Playground

by QW01_01

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium exercitationem corrupti rem nisi cum delectus explicabo ex sit fuga inventore molestias deleniti tempore ipsum hic commodi? Debitis saepe quod reiciendis.
<div class="progress-bar"><span>hello</span><span>hello</span></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quaerat reprehenderit cum error accusantium neque ipsam odio perferendis modi est esse nam ullam praesentium. Voluptas reprehenderit quis animi pariatur ducimus.

CSS

.progress-bar{
    height:40px;
    line-height:40px;
    width:200px;
    position:relative;    
    text-align:center;
    color:black;
}
.progress-bar span{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background-color:gray;
}

.progress-bar span:last-child{
    background-color:green;
    color:white;
    clip:rect(0 0px 40px 0);
}

JavaScript

var $$ = document.querySelectorAll(".progress-bar span");
var prgressBars= document.querySelectorAll(".progress-bar");

var p = 0;

setInterval(function(){
    p++;
    if(p>100){p=0;}
    for(var i = 0;i< $$.length;i++){
        $$[i].innerHTML = "progress "+p+" %";
    }
    for(var i = 0;i< prgressBars.length;i++){
        prgressBars[i].lastChild.style.clip = "rect(0 "+p*2+"px 40px 0)";
    }
},100);