Progress Bars

<div
  role="progressbar"
  aria-valuenow="25"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Progress"
>
  <p class="text-sm font-medium text-gray-900">25%</p>

  <div class="mt-2 h-2 w-full rounded-full bg-gray-200">
    <div class="h-full rounded-full bg-blue-600" style="width: 25%"></div>
  </div>
</div>

<div
  role="progressbar"
  aria-valuenow="25"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="UpdatingLabel"
>
  <div class="flex justify-between gap-4">
    <span id="UpdatingLabel" class="text-sm font-medium text-gray-900">Updating</span>

    <span class="text-sm font-medium text-gray-900">25%</span>
  </div>

  <div class="mt-2 h-2 w-full rounded-full bg-gray-200">
    <div class="h-full rounded-full bg-blue-600" style="width: 25%"></div>
  </div>
</div>

<div
  role="progressbar"
  aria-valuenow="100"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="DownloadingLabel"
>
  <div class="flex justify-between gap-4">
    <span id="DownloadingLabel" class="text-sm font-medium text-gray-900">Downloading</span>

    <span class="text-sm font-medium text-gray-900">100%</span>
  </div>

  <div class="mt-2 h-2 w-full rounded-full bg-gray-200">
    <div class="h-full rounded-full bg-green-600" style="width: 100%"></div>
  </div>
</div>

<div
  role="progressbar"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="LoadingLabel"
>
  <div class="flex justify-between gap-4">
    <span id="LoadingLabel" class="text-sm font-medium text-gray-900">Loading</span>

    <span class="text-sm font-medium text-gray-900">50%</span>
  </div>

  <div class="mt-2 h-2 w-full rounded-full bg-gray-200">
    <div class="h-full rounded-full bg-gray-600" style="width: 50%"></div>
  </div>
</div>

<div
  role="progressbar"
  aria-valuenow="25"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="DownloadLabel"
>
  <p id="DownloadLabel" class="text-xs font-medium tracking-wide text-gray-700 uppercase">
    Download
  </p>

  <div class="mt-2 h-1 w-full bg-gray-200">
    <div class="h-full bg-blue-600" style="width: 25%"></div>
  </div>

  <p class="mt-2 text-xs text-gray-700">1.2 of 3.8 MB</p>
</div>

<div
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="FileConversionLabel"
>
  <p id="FileConversionLabel" class="text-xs font-medium tracking-wide text-gray-700 uppercase">
    File Conversion
  </p>

  <div class="mt-2 h-1 w-full bg-gray-200">
    <div class="h-full bg-blue-600" style="width: 75%"></div>
  </div>

  <p class="mt-2 text-xs text-gray-700">3/4 files done</p>
</div>

<div
  role="progressbar"
  aria-valuenow="100"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="FileSyncLabel"
>
  <p id="FileSyncLabel" class="text-xs font-medium tracking-wide text-gray-700 uppercase">
    File Sync
  </p>

  <div class="mt-2 h-1 w-full bg-gray-200">
    <div class="h-full bg-green-600" style="width: 100%"></div>
  </div>

  <p class="mt-2 text-xs text-gray-700">Completed</p>
</div>

<div class="text-center">
  <div
    class="relative mx-auto size-32"
    role="progressbar"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-labelledby="LoadingCircleLabel"
  >
    <svg class="size-full" viewBox="0 0 100 100" aria-hidden="true">
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="currentColor"
        stroke-width="8"
        class="text-gray-200"
      />

      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="currentColor"
        stroke-width="8"
        stroke-dasharray="70.7 282.7"
        stroke-linecap="round"
        class="origin-center text-blue-600"
        style="transform: rotate(-90deg)"
      />
    </svg>

    <div class="absolute inset-0 grid place-content-center">
      <span class="text-xl font-semibold text-gray-900">25%</span>
    </div>
  </div>

  <p id="LoadingCircleLabel" class="mt-2 text-sm text-gray-700">Loading</p>
</div>

<div class="text-center">
  <div
    class="relative mx-auto size-32"
    role="progressbar"
    aria-valuenow="75"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-labelledby="NearlyDoneCircleLabel"
  >
    <svg class="size-full" viewBox="0 0 100 100" aria-hidden="true">
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="currentColor"
        stroke-width="8"
        class="text-gray-200"
      />

      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="currentColor"
        stroke-width="8"
        stroke-dasharray="212.1 282.7"
        stroke-linecap="round"
        class="origin-center text-green-600"
        style="transform: rotate(-90deg)"
      />
    </svg>

    <div class="absolute inset-0 grid place-content-center">
      <span class="text-xl font-semibold text-gray-900">75%</span>
    </div>
  </div>

  <p id="NearlyDoneCircleLabel" class="mt-2 text-sm text-gray-700">Nearly done</p>
</div>