Progress

The native progress element, restyled per engine. Screen readers announce the percentage without a single ARIA attribute.

plain CSS — works everywhere

PreviewCode

<progress
  value="65"
  max="100"
  aria-label="Upload progress"
  class="h-2 w-full max-w-sm appearance-none overflow-hidden rounded-full bg-secondary [&::-webkit-progress-bar]:bg-secondary [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-primary [&::-webkit-progress-value]:transition-all [&::-moz-progress-bar]:rounded-full [&::-moz-progress-bar]:bg-primary"
></progress>

How it works

<progress value max> carries the semantics; utilities restyle it per engine — [&::-webkit-progress-value]: for Chromium/WebKit, [&::-moz-progress-bar]: for Firefox.
The classic gotcha — vendor pseudo-elements can’t share a comma-separated rule, because one invalid selector kills the whole rule — doesn’t apply here: every utility class compiles to its own rule, so each engine just ignores the selectors it doesn’t know.
Drop the value attribute entirely and you get the native indeterminate animation.