JSFiddle - React, Tailwind, and code Playground

by Tyler Brown

HTML

<div class="bar">
  <div class="progress">70%</div>
</div>

<br /><br />
<button id="btn">Progress</button>

CSS

.bar {
  background-color: lightgray;
  height: 30px;
  width: 400px;
  border-radius: 50px;
  overflow: hidden;
}
.progress {
  box-sizing: border-box;
  height: 100%;
  width: 70%;
  transition: width 200ms;
  border-radius: 50px;
  color: white;
  padding: 6px 12px;

  /* magic parts */
  background: linear-gradient(to right, blue, red);
  background-size: 400px;
}

JavaScript

const elBtn = document.querySelector('#btn');
const elProgress = document.querySelector('.progress');
elBtn.addEventListener('click', () => {
  const progressPercent = `${Math.floor(Math.random() * 101)}%`;
	elProgress.style.width = progressPercent;
  elProgress.innerText = progressPercent;
});