JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<div class="queue-progress-btn" id="queue-btn">
  Queue!
</div>
<div class="progress-bar-container">
</div>

CSS

.queue-progress-btn {
  height: 30px;
  width: 150px;
  margin: 10px 0px;
  border-radius: 5px;
  background-color: hsl(60, 30%, 60%);
  color: white;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  line-height: 30px;
}

.queue-progress-btn:hover {
   filter: brightness(110%);
}

.progress-bar-container {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

.progress-bar {
  width: 300px;
  height: 25px;
  background-color: #dddddd;
  border-radius: 5px;
  padding: 5px;
  margin: 5px 0px;
}

.progress-bar-fill {
  height: 100%;
  animation: fill 3s both ease-in-out;
  background-color: seagreen;
}

@keyframes fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

JavaScript

const currentAnimations = [];
let numBars = 0;
let currentTimeout = null;

const queue = () => {
	createProgressBar();
}

document.querySelector("#queue-btn").addEventListener("click", queue);

const fill = () => {
	if (!currentAnimations.length) {
  	return;
  }
	const id = currentAnimations.shift();
  const progressBarInner = document.createElement("div");
  progressBarInner.classList.add("progress-bar-fill");
	document.getElementById(id).appendChild(progressBarInner)
  currentTimeout = setTimeout(() => {
      fill();
    }, 3000);
} 

const createProgressBar = () => {
	const container = document.querySelector(".progress-bar-container");
  const progressBar = document.createElement("div");
  
  progressBar.id = numBars;
  progressBar.classList.add("progress-bar");
  container.appendChild(progressBar);
  currentAnimations.push(numBars);
  console.log(currentAnimations);
  numBars++;
  fill();
}