Progress

Displays a progress bar with determinate or indeterminate state.

Examples

Default

<div class="w-full max-w-sm space-y-4">
  <c-progress value="35"></c-progress>
</div>

Custom Max

Use the max prop to change the range.

<div class="w-full max-w-sm space-y-4">
  <c-progress value="45" max="60"></c-progress>
</div>

With Label

Use a wrapper with flex layout to add a label and percentage display.

Upload progress 66% 
<div class="w-full max-w-sm space-y-2">
  <div class="flex items-center justify-between">
    <c-label>Upload progress</c-label>
    <span class="text-sm text-muted-foreground">66%</span>
  </div>
  <c-progress value="66"></c-progress>
</div>

Indeterminate

Omit the value to show a loading state.

<div class="w-full max-w-sm space-y-4">
  <c-progress></c-progress>
</div>

API Reference

Progress

Displays a progress bar with optional indeterminate animation.

Prop Type Default Description
value number - Current progress value (omit for indeterminate)
max number 100 Maximum value for the progress range
progress-classes string - Additional CSS classes for the progress track