JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<p id="output">
0
</p>

<div id="meter"></div>

<button id="trigger">
  Trigger
</button>

CSS

#meter {
  width: 0;
  height: 20px;
  
  background: cornflowerblue;
}

JavaScript

const el = document.getElementById('output')
document.getElementById('trigger').addEventListener('mousedown', down)
document.getElementById('trigger').addEventListener('mouseup', up)

const min = 0
const max = 1

let startLevel = max
let destLevel = min

function down(e) {
	el.textContent = 12345
}

function up(e) {
	el.textContent = 54321
}

function step(timestamp) {
  const curr = linearTween(timestamp, startLevel, destLevel, 3000)
	el.textContent = curr
	if (curr > destLevel){
  	window.requestAnimationFrame(step)
  }
}

window.requestAnimationFrame(step)

function linearTween (currentTime, beginValue, endValue, totalDuration) {
  var progress = endValue - beginValue;
	return progress * currentTime / totalDuration + beginValue;
}

/* function run() {
  const start = 100
  const end = 50
  
  let curr = start
  let t = 0
  while (curr > end) {
    curr = linearTween(t, start, end, 15);
    t += 1
    console.log(curr);
  }
}
 */