Progress Bars

Progress indicators inform users about the status of ongoing processes.

Loading..20%

Loading..40%

2 mins remaining60%

Loading..2 mins remaining80%

Variations

Basic

Copy as:HTMLReact

25%copydone

50%copydone

75%copydone

100%copydone

<!-- Component: Basic 25% progress bar -->
<progress aria-label="loading 25%" id="p01a" max="100" value="25" class="w-full overflow-hidden rounded bg-slate-100 [&::-webkit-progress-bar]:bg-slate-100 [&::-webkit-progress-value]:bg-emerald-500 [&::-moz-progress-bar]:bg-emerald-500"> 25% </progress>
<!-- End Basic 25% progress bar -->

Progress bars with labels above

Copy as:HTMLReact

Loading..20%

copydone

Loading..40%

copydone

2 mins remaining60%

copydone

Loading..2 mins remaining80%

copydone

<!-- Component: Progress bar with label loading at the start above -->
<div class="relative w-full">
  <label id="p01c-label" for="p01c" class="block mb-1 text-xs text-slate-500">Loading..</label>
  <progress aria-labelledby="p01c-label" id="p01c" max="100" value="20" class="block w-full overflow-hidden rounded bg-slate-100 [&::-webkit-progress-bar]:bg-slate-100 [&::-webkit-progress-value]:bg-emerald-500 [&::-moz-progress-bar]:bg-emerald-500"> 20% </progress>
</div>
<!-- End Progress bar with label loading at the start above -->

Progress bars with labels inside

Copy as:HTMLReact

25%25%

copydone

50%50%

copydone

75%75%

copydone

100%100%

copydone

<!-- Component: Progress bar 25% with inside label -->
<div class="relative w-full">
  <label id="p01d-label" for="p01d" class="absolute top-0 left-0 block w-1/4 mb-0 text-xs text-center text-white"><span class="sr-only">uploading</span> 25%</label>
  <progress aria-labelledby="p01d-label" id="p01d" max="100" value="25" class="block w-full overflow-hidden rounded bg-slate-100 [&::-webkit-progress-bar]:bg-slate-100 [&::-webkit-progress-value]:bg-emerald-500 [&::-moz-progress-bar]:bg-emerald-500"> 25%</progress>
</div>
<!-- End Progress bar 25% with inside label -->

Progress bars with trailing labels

Copy as:HTMLReact

25%25%

copydone

50%50%

copydone

75%75%

copydone

100%100%

copydone

<!-- Component: Progress bar 25% with trailing label -->
<div class="flex w-full gap-2">
  <label id="p01e-label" for="p01e" class="order-2 mb-0 text-xs text-center text-slate-500 "><span class="sr-only">uploading</span> 25%</label>
  <progress aria-labelledby="p01e-label" id="p01e" max="100" value="25" class="block w-full overflow-hidden rounded bg-slate-100 [&::-webkit-progress-bar]:bg-slate-100 [&::-webkit-progress-value]:bg-emerald-500 [&::-moz-progress-bar]:bg-emerald-500"> 25%</progress>
</div>
<!-- End Progress bar 25% with trailing label -->

Progress bars with trailing icons

Copy as:HTMLReact

25%

copydone

50%

copydone

75%

copydone

100%

copydone

<!-- Component: Danger progress bar with trailing icon -->
<div class="flex w-full gap-2">
  <label id="p01f-label" for="p01f" class="order-2 mb-0 text-xs text-center text-pink-500 ">
    <span class="sr-only">uploading</span>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-labelledby="title-p01f desc-p01f">
      <title id="title-p01f">Icon title</title>
      <desc id="desc-p01f">Some desc</desc>
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
    </svg>
  </label>
  <progress aria-labelledby="p01f-label" id="p01f" max="100" value="25" class="block w-full overflow-hidden rounded bg-slate-100 [&::-webkit-progress-bar]:bg-slate-100 [&::-webkit-progress-value]:bg-pink-500 [&::-moz-progress-bar]:bg-pink-500"> 25%</progress>
</div>
<!-- End Danger progress bar with trailing icon -->

Colored progress bars

Copy as:HTMLReact

40%copydone

60%copydone

80%copydone

100%copydone

<!-- Component: Cyan colored success progress bar -->
<progress aria-label="loading 40%" id="p02g" max="100" value="40" class="w-full overflow-hidden rounded bg-slate-100 [&::-webkit-progress-bar]:bg-slate-100 [&::-webkit-progress-value]:bg-cyan-500 [&::-moz-progress-bar]:bg-cyan-500"> 40% </progress>
<!-- End Cyan colored success progress bar -->

Size Variation

Copy as:HTMLReact

20%copydone

40%copydone

60%copydone

80%copydone

<!-- Component: Xs size variation progress bar -->
<progress aria-label="loading 20%" id="p01b" max="100" value="20" class="h-1 w-full overflow-hidden rounded bg-slate-100 [&::-webkit-progress-bar]:bg-slate-100 [&::-webkit-progress-value]:bg-emerald-500 [&::-moz-progress-bar]:bg-emerald-500"> 20% </progress>
<!-- End Xs size variation progress bar -->

Usage

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.

Specs

Progress bars using the native <progress> HTML element should include the following attributes:

max: corresponds to the maximum value of the progress.
value: corresponds to the active value of the progress.

The progress component can contain the following elements:

Progress bar: the bar has a 1rem (16px) height for the base size, 1.5rem (24px) for the large size, 0.5rem (8px) for the small size and 0.25rem (4px) height in the extra small size.
Label: 0.75rem (12px) font size and can be positioned above or inside (on base and large sizes) the progress bar.
Icon: 1rem (16px) width and height.

Accessibility notes

Since the native HTML <progress> is utilized no extra roles are required. In most cases, you should provide an accessible label when using this element.

Progress Bars

Variations

Basic

Progress bars with labels above

Progress bars with labels inside

Progress bars with trailing labels

Progress bars with trailing icons

Colored progress bars

Size Variation

Usage

Specs

Accessibility notes

Check out the latest release!