JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="progress-container">
  <div class="progress-bar" id="progress-bar"></div>
</div>
<button onclick="init()">Start Progress</button>

CSS

.progress-container {
  width: 50%;
  background-color: #f3f3f3;
  height: 30px;
}

.progress-bar {
  width: 0;
  height: 100%;
  background-color: #4caf50;
  text-align: center;
  line-height: 30px;
  color: white;
}

JavaScript

function init() {
  let width = 0;
  const progressBar = document.querySelector(".progress-bar");

  const interval = setInterval(() => {
    if (width < 100) {
      width++;
      progressBar.style.width = width + "%";
      progressBar.innerText = width + "%";
    } else {
      clearInterval(interval);
    }
  }, 50);
}

init();