<body>
  <div class="progress">
    <div class="progress-done" data-done="92">
    </div>
  </div>
</body> 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
}

.progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ddd;
  height: 30px;
  width: 400px;
  border-radius: 20px;
}

.progress-done {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bolder;
  color: #fff;
  height: 100%;
  background: linear-gradient(to left, rgb(253, 2, 140), rgb(240, 199, 230));
  border-radius: 20px;
  display: grid;
  place-items: center;
  width: 0;
  box-shadow: 0 0 3px -5px rgb(253, 2, 140), 0px 3px 150px rgb(253, 2, 140);
  transition: width 0.5s ease;
}

//set variable
var counter = 0;

//function
window.addEventListener(
  "DOMContentLoaded",
  (move = () => {
    if (counter == 0) {
      J = 1;
      var elem = document.querySelector(".progress-done");
      var width = 50;
      var main = setInterval(frame, 50); 
      var percentage = elem.getAttribute("data-done")
      
      function frame() {
        if (width >= percentage) {
          clearInterval(main);
        } else { 
          width++;
          elem.style.width = width + "%";
          elem.innerHTML = width + "%";
        }
      }
    }
  })
);

//or
//   var  counter=0;
//   setInterval(()=>{
//   if (counter===100){
//   clearInterval();
//   }
//   else{
//   counter+=1;
//   document.querySelector=(".progress-done").innerHTML=counter+"%";
//     }

//   },1000)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.