Progress

Progress bars are used to indicate the progress of a task or the completion of a process. They are commonly used in forms, such as in file uploads or in the loading of content. Progress bars can also be used to indicate reading progress for content such as blogs, articles, documentation, or other text-based content.

Design Hints

Progress bars are a great way to provide users with a visual representation of the progress of a task or the completion of a process. They can be used in a variety of contexts like forms, loading indicators, and progress bars for reading content. It gives the user a clear visual indication of the current progress of a task.

Accessiblity Hints

For accessibility, we assign the `progressbar` role to the div and use the `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes to indicate the current progress of the task. To provide more information about the progress bar, we can use the aria-label attribute on the div to provide a description of the task or the process.

Note: While the examples below are static, you will most likely want to use javascript to update the progress bar as the task progresses.

Simple Progress Bars

A few styles of progress bars which can be used to indicate the progress of a task or the completion of a process.

25% Complete

50%

Current Progress 50%

<div class="flex flex-col space-y-12 p-6">
  <div
    class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
    role="progressbar"
    aria-valuenow="25"
    aria-valuemin="0"
    tabindex="0"
    aria-valuemax="100"
    id="progress-bar-1"
    aria-labelledby="progress-label-1"
  >
    <span id="progress-label-1" class="sr-only">25% Complete</span>
    <div
      aria-hidden="true"
      class="h-3 w-[25%] rounded-full bg-indigo-600 dark:bg-indigo-500"
    >
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      aria-valuenow="25"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-labelledby="progress-label-2"
      id="progress-bar-2"
    >
      <div
        aria-hidden="true"
        class="h-3 w-[25%] rounded-full bg-indigo-600 dark:bg-indigo-500"
      >
      </div>
    </div>
    <div
      id="progress-label-2"
      class="block text-start text-sm font-medium text-gray-700 dark:text-zinc-400"
    >
      25% Complete
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      class="h-5 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      aria-valuenow="50"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-labelledby="progress-label-3"
      id="progress-bar-3"
    >
      <div
        id="progress-label-3"
        class="h-5 w-[50%] items-center justify-center rounded-full bg-indigo-600 text-center text-sm text-white dark:bg-indigo-500"
      >
        <span class="sr-only">Current Progress</span>
        50%
      </div>
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      id="progress-label-4"
      class="inline-flex w-full items-end justify-between px-1 text-gray-700 dark:text-zinc-400"
    >
      <span class="text-sm font-medium">Current Progress</span>
      <span class="text-sm font-medium">50%</span>
    </div>
    <div
      class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      aria-labelledby="progress-label-4"
      aria-valuenow="50"
      aria-valuemin="0"
      aria-valuemax="100"
      id="progress-bar-4"
    >
      <div
        aria-hidden="true"
        class="h-3 w-[50%] items-center justify-center rounded-full bg-indigo-600 text-center text-sm text-white dark:bg-indigo-500"
      >
      </div>
    </div>
  </div>
</div>

<div class="flex flex-col space-y-12 p-6">
  <div
    class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
    role="progressbar"
    aria-valuenow="25"
    aria-valuemin="0"
    tabindex="0"
    aria-valuemax="100"
    id="progress-bar-1"
    aria-labelledby="progress-label-1"
  >
    <span id="progress-label-1" class="sr-only">25% Complete</span>
    <div
      aria-hidden="true"
      class="h-3 w-[25%] rounded-full bg-indigo-600 dark:bg-indigo-500"
    >
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      aria-valuenow="25"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-labelledby="progress-label-2"
      id="progress-bar-2"
    >
      <div
        aria-hidden="true"
        class="h-3 w-[25%] rounded-full bg-indigo-600 dark:bg-indigo-500"
      >
      </div>
    </div>
    <div
      id="progress-label-2"
      class="block text-start text-sm font-medium text-gray-700 dark:text-zinc-400"
    >
      25% Complete
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      class="h-5 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      aria-valuenow="50"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-labelledby="progress-label-3"
      id="progress-bar-3"
    >
      <div
        id="progress-label-3"
        class="h-5 w-[50%] items-center justify-center rounded-full bg-indigo-600 text-center text-sm text-white dark:bg-indigo-500"
      >
        <span class="sr-only">Current Progress</span>
        50%
      </div>
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      id="progress-label-4"
      class="inline-flex w-full items-end justify-between px-1 text-gray-700 dark:text-zinc-400"
    >
      <span class="text-sm font-medium">Current Progress</span>
      <span class="text-sm font-medium">50%</span>
    </div>
    <div
      class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      aria-labelledby="progress-label-4"
      aria-valuenow="50"
      aria-valuemin="0"
      aria-valuemax="100"
      id="progress-bar-4"
    >
      <div
        aria-hidden="true"
        class="h-3 w-[50%] items-center justify-center rounded-full bg-indigo-600 text-center text-sm text-white dark:bg-indigo-500"
      >
      </div>
    </div>
  </div>
</div>

Alternate Progress Bars

Alternate style for progress bars with a subtle gradient.

25% Complete

50%

Current Progress 50%

<div class="flex flex-col space-y-12 p-6">
  <div
    class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
    role="progressbar"
    tabindex="0"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100"
    id="alt-progress-bar-1"
    aria-labelledby="alt-progress-label-1"
  >
    <span id="alt-progress-label-1" class="sr-only">25% Complete</span>
    <div
      aria-hidden="true"
      class="h-3 w-[25%] rounded-full bg-gradient-to-r from-indigo-500 via-indigo-700 to-indigo-900 dark:bg-gradient-to-l"
    >
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      id="alt-progress-bar-2"
      aria-valuenow="25"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-labelledby="alt-progress-label-2"
      id="alt-progress-bar-2"
    >
      <div
        aria-hidden="true"
        class="h-3 w-[25%] rounded-full bg-gradient-to-r from-indigo-500 via-indigo-700 to-indigo-900 dark:bg-gradient-to-l"
      >
      </div>
    </div>
    <div
      id="alt-progress-label-2"
      class="block text-start text-sm font-medium text-gray-700 dark:text-zinc-400"
    >
      25% Complete
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      class="h-5 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      aria-valuenow="50"
      aria-valuemin="0"
      aria-valuemax="100"
      id="alt-progress-bar-3"
      aria-labelledby="alt-progress-label-3"
    >
      <div
        id="alt-progress-label-3"
        class="h-5 w-[50%] items-center justify-center rounded-full bg-gradient-to-r from-indigo-500 via-indigo-700 to-indigo-900 text-center text-sm text-white dark:bg-gradient-to-l"
      >
        <span class="sr-only">Current Progress</span>
        50%
      </div>
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      id="alt-progress-label-4"
      class="inline-flex w-full items-end justify-between px-1 text-gray-700 dark:text-zinc-400"
    >
      <span class="text-sm font-medium">Current Progress</span>
      <span class="text-sm font-medium">50%</span>
    </div>
    <div
      class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      aria-labelledby="alt-progress-label-4"
      tabindex="0"
      aria-valuenow="50"
      aria-valuemin="0"
      aria-valuemax="100"
      id="alt-progress-bar-4"
    >
      <div
        aria-hidden="true"
        class="h-3 w-[50%] items-center justify-center rounded-full bg-gradient-to-r from-indigo-500 via-indigo-700 to-indigo-900 text-center text-sm text-white dark:bg-gradient-to-l"
      >
      </div>
    </div>
  </div>
</div>

<div class="flex flex-col space-y-12 p-6">
  <div
    class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
    role="progressbar"
    tabindex="0"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100"
    id="alt-progress-bar-1"
    aria-labelledby="alt-progress-label-1"
  >
    <span id="alt-progress-label-1" class="sr-only">25% Complete</span>
    <div
      aria-hidden="true"
      class="h-3 w-[25%] rounded-full bg-gradient-to-r from-indigo-500 via-indigo-700 to-indigo-900 dark:bg-gradient-to-l"
    >
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      id="alt-progress-bar-2"
      aria-valuenow="25"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-labelledby="alt-progress-label-2"
      id="alt-progress-bar-2"
    >
      <div
        aria-hidden="true"
        class="h-3 w-[25%] rounded-full bg-gradient-to-r from-indigo-500 via-indigo-700 to-indigo-900 dark:bg-gradient-to-l"
      >
      </div>
    </div>
    <div
      id="alt-progress-label-2"
      class="block text-start text-sm font-medium text-gray-700 dark:text-zinc-400"
    >
      25% Complete
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      class="h-5 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      tabindex="0"
      aria-valuenow="50"
      aria-valuemin="0"
      aria-valuemax="100"
      id="alt-progress-bar-3"
      aria-labelledby="alt-progress-label-3"
    >
      <div
        id="alt-progress-label-3"
        class="h-5 w-[50%] items-center justify-center rounded-full bg-gradient-to-r from-indigo-500 via-indigo-700 to-indigo-900 text-center text-sm text-white dark:bg-gradient-to-l"
      >
        <span class="sr-only">Current Progress</span>
        50%
      </div>
    </div>
  </div>
  <div class="flex flex-col items-end justify-center space-y-1">
    <div
      id="alt-progress-label-4"
      class="inline-flex w-full items-end justify-between px-1 text-gray-700 dark:text-zinc-400"
    >
      <span class="text-sm font-medium">Current Progress</span>
      <span class="text-sm font-medium">50%</span>
    </div>
    <div
      class="h-3 w-full rounded-full bg-gray-300 dark:bg-zinc-800"
      role="progressbar"
      aria-labelledby="alt-progress-label-4"
      tabindex="0"
      aria-valuenow="50"
      aria-valuemin="0"
      aria-valuemax="100"
      id="alt-progress-bar-4"
    >
      <div
        aria-hidden="true"
        class="h-3 w-[50%] items-center justify-center rounded-full bg-gradient-to-r from-indigo-500 via-indigo-700 to-indigo-900 text-center text-sm text-white dark:bg-gradient-to-l"
      >
      </div>
    </div>
  </div>
</div>

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Progress Bars	Yes	Yes	Yes	Yes	Yes
Alternate Progress Bars	Yes	Yes	Yes	Yes	Yes

For knowing more about the progressbar role used in the examples above, you can read the w3c WAI-ARIA 1.3 documentation about progressbar role

It is important to test the components with assistive technologies to ensure that they are accessible in the context of its usage. For example, if the progress bar is used in a form, you will have to use appropriate labels and textual information to help users understand the purpose of the progress bar and how it relates to the form.