<wmcp-progress>
A progress bar, determinate or indeterminate. Presentational — no WebMCP tool. It's a role="progressbar" with aria-valuenow / aria-valuemax wired from value / max; omit value (or set indeterminate) for an animated indeterminate bar.
<!-- Determinate -->
<wmcp-progress value="60" max="100"></wmcp-progress>
<!-- Indeterminate (omit value) -->
<wmcp-progress></wmcp-progress>
The indeterminate animation respects prefers-reduced-motion — it falls back to a static half-opacity bar rather than sliding.
Element attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value. Leave unset for indeterminate. |
max | number | 100 | Maximum value. |
indeterminate | boolean | false | Force the animated indeterminate state. |
Theming
Track, bar, height, and radius are custom properties, defaulting through the design tokens:
:root {
--progress-bar: var(--brand);
--progress-height: 0.375rem;
--progress-radius: 0.25rem;
}