JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<table>
  <tr>
    <td>Downloading progress:</td>
    <td><progress id="progressbar" value="0" max="100" style="width: 100%"></progress></td>
  </tr>
  <tr>
    <td></td>
    <td><meter id="meterbar" value="0" min="0" max="100" style="width: 100%">2 out of 10</meter></td>
  </tr>
<table>

CSS

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

table {
  padding: 5px;
  border: 1px dashed black;
  border-radius: 40px;
}

progress,
meter {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

meter {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

JavaScript

function main() {
	const debug = false
	const pbar = document.getElementById('progressbar')
  const mbar = document.getElementById('meterbar')

	// Credit: https://stackoverflow.com/a/36824571
	let progress = 0
	setInterval(() => {
		progress = (progress + 1) % 200
		//if(debug && (progress === 0 || progress === 100 || progress === 200)) console.log(progress, 100 - Math.abs(progress - 100))
  	pbar.value = mbar.value = 100 - Math.abs(progress - 100)
  }, 10)
}

main()

/*const bars = [document.getElementById('progressbar'), document.getElementById('meterbar')]
let progress = 0

setInterval(() => bars[0].value = bars[1].value = progress = ++progress % 101, 10)

function getProgress() {
	console.log(progress)
}

document.getElementsByTagName('table')[0].addEventListener('click', getProgress)*/

/*let counter = -1
let arr = []

const a = () => {
	arr.push(progress)
	++counter
  if(counter > 120) {
		clearInterval(b)
    console.log(arr)
  }
	bars[0].value = bars[1].value = progress = ++progress % 101
}

const b = setInterval(a, 10)*/

/*var progress = 0;
var progressbar = document.getElementById("progressbar");
var meterbar = document.getElementById("meterbar");

function incrementProgress() {
    progress++;
    if (progress > 100) progress = 0;
    progressbar.value = meterbar.value = progress;
}
setInterval(incrementProgress, 10);*/