JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<div class="card">
  <div class="card-body">
    <div class="progress">

      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%; background-color: #ccc;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress" style="top: -1rem;">
      <div class="progress-bar progress-bar-main progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 0%" aria-valuenow="42" aria-valuemin="0" aria-valuemax="5"></div>
    </div>
    

    <div class="input-group">
		<button class="btn btn-outline-secondary" onclick="abort()"><i class="fas fa-times-circle"></i></button>
      <input type="text" class="form-control" placeholder="" aria-label="Recipient's username with two button addons" disabled>
      <button class="btn btn-primary" onclick="timer1(64)">64 sec</button>
      <button class="btn btn-primary" onclick="timer1(5)">5 sec</button>
    </div>

  </div>

CSS

.card-body {
	/*position: relative;
	top: 0;
	left: 0;*/
	min-height: 1em;
}

.progress {
	
	position: relative;
	background-color: transparent;
}

button {
}

JavaScript

const progressBarElem = document.querySelector('div.progress-bar-main');
const infoinput = document.querySelector('input.form-control');
var newvaluenow = 0;
var howlong,
		howlong2;
var t;
//var howlong = 0;

function timer1(howlong){
howlong = howlong;
progressBarElem.setAttribute("aria-valuemax", howlong);
t=setInterval(runFunction,100);

}

function runFunction(){
//t=setInterval("",1000);
var howlong = progressBarElem.getAttribute('aria-valuemax');
//howlong = howlong + ".0";
//alert("Value: " + howlong);
newvaluenow = newvaluenow + 0.10;

//var newvaluenow = newvaluenow + 0.10;
//newvaluenow = newvaluenow.toFixed(0);
var howlong_remain = howlong - newvaluenow;
howlong_remain = howlong_remain.toFixed(1);
howlong2 = newvaluenow / howlong * 100;
//alert("howlong: " + howlong + "howlong2 " + howlong2 + "newvaluenow: " + newvaluenow + "");
infoinput.setAttribute("value", "noch " + howlong_remain + " sec");
progressBarElem.setAttribute("aria-valuenow", newvaluenow);
progressBarElem.style.width = howlong2 + '%';
if(howlong_remain <= 0){
clearInterval(t);
infoinput.setAttribute("value", "fertig");
setTimeout(function(){
abort();
}, 1000)
}

}

function abort(){
progressBarElem.setAttribute("aria-valuenow", 0);
progressBarElem.style.width = '0%';
progressBarElem.setAttribute("aria-valuemax", 0);

setTimeout(function(){
infoinput.setAttribute("value", "");
}, 1000)
}