Progress Indicators

Progress indicators inform users about the status of ongoing processes, such as loading an app or submitting a form.

Linear progress

Linear animation

Circular progress

Circular animation

Determinate

Determinate indicators display how long a process will take. They should be used when the process completion rate can be detected. Linear progress requires a function to change style="width: --%;" from 0 to 100. circular progress requires a function to change style="stroke-dashoffset: ---px;" from 94.2478px to 0px.

              
<!-- linear progress -->
<div class="flex bg-gray-100 dark:bg-gray-700 h-1">
  <div class="flex bg-primary-600 dark:bg-primary-200" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- circular progress -->
<svg data-type="progress_bg" class="circle-progress w-9 h-9" data-percent="75" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle class="stroke-[4px]" r="15" cx="18" cy="18" fill="transparent" stroke-dasharray="94.25" stroke-dashoffset="0"></circle>
  <circle data-type="progress_fill" class="circle-fill stroke-primary-600 dark:stroke-primary-200 stroke-[4px]" r="15" cx="18" cy="18" fill="transparent" stroke-dasharray="94.25" stroke-dashoffset="0"></circle>
</svg>

Linear loader

Circular loader

Indeterminate (loader)

Indeterminate indicators express an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.

              
<!-- linear loader -->
<div class="linear-loader relative overflow-hidden w-full h-1 flex bg-gray-100 dark:bg-gray-700">
  <!-- slow -->
  <div class="bar absolute inset-0 w-full bg-primary-600 dark:bg-primary-200"></div>
  <!-- fast -->
  <div class="bar absolute inset-0 w-full bg-primary-600 dark:bg-primary-200"></div>
</div>

<!-- circular loader -->
<svg class="circular-loader relative w-[100px] h-[100px]">
  <circle class="path stroke-primary-600 dark:stroke-primary-200" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
</svg>