JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<div class="progress">
  <span class="bar"></span>
</div>
<div class="countDown"></div>

CSS

.progress {
  border: 1px solid #000;
  width: 200px;
  height: 5px;
}

.bar {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background: red;
}

JavaScript

let globalID;
const progressWidth = document.querySelector('.progress').offsetWidth- 2;
const counter = document.querySelector('.countDown');
const bar = document.querySelector('.bar');
let allTime = 4;

console.log(progressWidth);

const start = () => {
	globalID = requestAnimationFrame(animate);
}

const pause = () => {
	cancelAnimationFrame(globalID);
}

const cancel = () => {

}

const animate = (time) => {
let now = 0, then = performance.now(), delta;
delta = then - now;
now = then;


console.log( time.toFixed());

  /* bar.style.left = delta+'px'; */
  globalID = requestAnimationFrame(animate);
}

start();