Progress

A linear or circular progress bar. The value is controlled — drive it from your app as work completes.

Uploading files

<div
  data-controller="zag-progress"
  data-part="root"
  data-zag-progress-value-value="65"
  class="space-y-1"
>
  <div class="flex items-center justify-between text-sm">
    <span data-part="label" class="font-medium">Uploading files</span>
    <span data-part="value-text" class="text-muted-foreground"></span>
  </div>
  <div data-part="track" class="bg-muted h-2 overflow-hidden rounded-full">
    <div
      data-part="range"
      class="bg-primary h-full rounded-full transition-all"
      style="width: var(--percent, 0%)"
    ></div>
  </div>
</div>

Parts

root, label, value-text, track, range, circle, circle-track, circle-range. (The last three are for a circular bar.)

Values

Attribute	Type	Default	Description
data-zag-progress-value-value	Number	0	Current value (controlled).
data-zag-progress-min-value	Number	0	Minimum value.
data-zag-progress-max-value	Number	100	Maximum value.
data-zag-progress-orientation-value	String	"horizontal"	"horizontal" or "vertical".
data-zag-progress-indeterminate-value	Boolean	false	Show the indeterminate state.

Programmatic control

value (getter), percent (getter), set(value) (pass null for indeterminate).