Progress

Displays an indicator showing the completion progress of a task.

Default

Different Values

The value prop accepts a number from 0 to 100.

Values

25%

50%

75%

100%

Sizes

Use the size prop to change the height of the progress bar.

Sizes

Small

Default

Large

Extra Large

With Label

Combine with a label to show the current progress value.

With Label

Uploading... 45%

    <div class="space-y-2">
  <div class="flex justify-between text-sm">
    <span>Uploading...</span>
    <span>45%</span>
  </div>
  <.progress value={45} aria_label="Upload progress" />
</div>
  

Interactive Example

Try adjusting the progress value.

Interactive