JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<button id='add'>+ Add</button>
<div id='container'></div>

<div style='display: none'>
  <div class='progress'>
    <div class='bar'></div>
  </div>
</div>

CSS

#add {
  padding: 10px;
  font-size: 18px;
}

#container {
  margin: 20px;
}

.progress {
  margin: 0 0 10px;
  width: 500px;
  height: 20px;
  background-color: #e0e0e0;
}

.progress .bar {
  width: 0;
  height: 100%;
  background-color: blue;
  transition: width 3s ease;
}

.progress.active .bar {
  width: 100%;
}

Babel + JSX

$(() => {
  const $container = $('#container');
  const $addButton = $('#add');
  const $progress = $('.progress');
	let promise;
 
  const prom = () => new Promise(res => {
  	setTimeout(() => res(), 3000);
  })

  $addButton.on('click', () => {
    const $newProgress = $progress.clone();
    $container.append($newProgress);
    if (!promise) {
    	$newProgress.addClass('active');
    }
    promise = prom().then(() => {
      	$newProgress.addClass('active');
    });
  });

});