Striped Animated Progress

<!--
  Tailwind can't declare @keyframes, so the barber-pole animation lives in a
  <style> block that travels with the component. motion-reduce:animate-none is
  not optional: the stripes convey nothing the % doesn't, so a reduced-motion
  user gets the same fill standing still.
-->
<style>
  @keyframes progress-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
</style>

<div class="w-full">
  <div class="mb-1.5 flex items-center justify-between gap-3">
    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Processing</span>
    <span class="text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">55%</span>
  </div>
  <div
    role="progressbar"
    aria-valuenow="55"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="Processing"
    class="h-3 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800"
  >
    <div
      class="h-full rounded-full bg-blue-600 bg-[length:1rem_1rem] bg-[linear-gradient(45deg,rgba(255,255,255,0.25)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.25)_50%,rgba(255,255,255,0.25)_75%,transparent_75%,transparent)] animate-[progress-stripes_1s_linear_infinite] motion-reduce:animate-none dark:bg-blue-500"
      style="width: 55%"
    ></div>
  </div>
</div>