JSFiddle - React, Tailwind, and code Playground

by Nabaraj Saha

HTML

<div class="container">
  <div class="loader">
    10%
  </div>
</div>

CSS

.container{
  width:500px;
  height:20px;
  border:1px solid green;
}
.loader{
  background-color:green;
  height:20px;
  text-align:center;
  display:flex;
  align-items:center;
  transition:width 2s linear;
  color:white;
  justify-content:center;
  font-size:12px;
  width:0;
}

JavaScript

function loader(timer){
	let loader = document.querySelector(".loader");
  loader.style.transition="width 2s linear"
  loader.style.width="100%";
  /* let width = 0 ;
  console.log("dddd")
  let interval = setInterval(function(){
    loader.style.transition="width 0.2s linear"
    loader.style.width = `${width}%`;
    let content = document.createTextNode(`${width}%`);
    loader.innerText = `${width}%`;
    console.log(width, (timer*1000)/100);
    width++;
    if(width>100){
      clearInterval(interval);
    }
  },(timer*1000)/100) */
}
loader(2)