Progress

Force indeterminate state regardless of the `value` prop. Useful when you explicitly want indeterminate behaviour even while a value is available.

Maximum value. The percentage is computed as `value / max`.

Current progress value. Omitting this (without passing `indeterminate`) infers an indeterminate state.

Render a visible percentage label next to the indicator. Hidden when the progress is indeterminate.

Controls bar height (linear) or ring diameter (circular), and scales the label font size.

Semantic color role applied to the indicator. Use `neutral`, `success`, `warning`, or `danger` to convey meaning.

Visual shape. `linear` renders a horizontal bar using a native `<progress>` element. `circular` renders an SVG ring with `role="progressbar"`.

Custom label formatter. Receives the clamped value and max; return any string. Only called when `showLabel` is true and the state is not indeterminate.

Accessible label text passed as `aria-label` to the native `<progress>` (linear) or SVG progressbar (circular).

Optional extra content rendered inside the progress wrapper.

Bound reference to the root element (`bind:this`).

Per-slot style and attribute override bag (root, track, indicator, label). `style` accepts a Panda CSS `SystemStyleObject`; `props` forwards arbitrary HTML or SVG attributes.

Astro / vanilla: serialize the props into `data-progress-config` so the client runtime hydrates this instance and `getPindoba(el, "progress")` can `update()` it. Frameworks with their own reactivity don't need it.