JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div>
  <progress id="myBar" max="100" value="0"></progress>
</div>

<div>
  <button id="dl">Télécharger</button>
</div>

CSS

#myBar {
  width: 50vw;
}

JavaScript

let timer;
let dlButton;

function mettreAJour() {
	let myBar = document.getElementById('myBar');
  
  myBar.value += 5;
  
  if (myBar.value >= 100) {
  	clearInterval(timer);
    dlButton.disabled = false;
  }
}

function demarrerTelechargement() {
myBar
	timer = setInterval(mettreAJour, 100);
  dlButton.disabled = true;
}

dlButton = document.getElementById('dl');
dlButton.onclick = demarrerTelechargement;