Progress
A bar that shows how far along something is, or that it is still working.
{ui progress,
value: 60,
label: 'Upload',
/}
The progress is a div with role="progressbar", so a screen reader announces its value, and label is its accessible name. It is drawn the same way in every browser, with no vendor-specific styling. value counts up to max, which is 100 unless you set it, so value: 3, max: 4 is three quarters. The bar fills in the primary colour over a faint track of the same colour,, and it eases when the value changes, so swapping in a new bar from the server reads as movement.
{ui progress, label: 'Loading' /}
Leave out value when you cannot say how far along it is. A band then sweeps across the track with CSS alone. Under prefers-reduced-motion it sweeps slowly instead of stopping, so it still reads as busy.
To track a job, poll a :block fragment that renders the progress with the current value, and swap it with hx-trigger="every 1s". The server stays the source of the number.
Params
| Param | Default | Description |
|---|---|---|
| value | null | how far along, up to max; leave out for an indeterminate bar that keeps moving |
| max | 100 | the value that means done |
| label | null | the accessible name, read by screen readers |
| class | '' | added to progress |
| attrs | [] | any other attributes, e.g. ['id' => 'upload'] |