JSFiddle - React, Tailwind, and code Playground

by KhuyenNH

HTML

<main>
  <h1><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric" target="_blank">font-variant-numeric</a>:</code></h1>
  <section>
    <code>normal;</code>
    <output>0.0</output>
  </section>
  <section>
    <code>tabular-nums;</code>
    <output class="tabular-nums">0.0</output>
  </section>
</main>

CSS

:root {
  font-family: system-ui;
  font-size: calc(2.2vw + 16px);
  color: rgb(31, 25, 45);
  white-space: nowrap;
}

body {
  padding: 1em 0.5em;
}

h1,
a {
  font-size: inherit;
  color: inherit;
  margin: 0;
  color: #379BFF;
}

section {
  display: flex;
  margin: 1em;
}

code {
  min-width: 12ch;
  letter-spacing: -0.05em;
  text-align: right;
}

output {
  width: 8ch;
  letter-spacing: 0.05em;
  text-align: right;
  font-weight: 700;
  color: black;
}

.tabular-nums {
  color: #379BFF;
  font-variant-numeric: tabular-nums;
}

JavaScript

nextFrame().then(() => document.querySelectorAll("output").forEach(animateIncrement))

const { format } = new Intl.NumberFormat("en-US", { style: "decimal", minimumFractionDigits: 1 })

async function animateIncrement(element) {
  let value = Number(element.value)
  await delay(500)
  while (value < 100000) {
    await nextFrame()
    element.value = format(value)
    value += 8.2
    await delay(30)
  } 
}

function nextFrame() {
  return new Promise(resolve => requestAnimationFrame(resolve))
}

function delay(ms = 10) {
  return new Promise(resolve => setTimeout(resolve, ms))
}