Progress Bar
Determinate and indeterminate horizontal loading indicator.
<rhx-progress-bar>
Examples
Determinate Values
<rhx-progress-bar rhx-value="0" rhx-label="Not started" />
<rhx-progress-bar rhx-value="25" rhx-label="Quarter complete" />
<rhx-progress-bar rhx-value="65" rhx-label="Upload progress" />
<rhx-progress-bar rhx-value="100" rhx-label="Complete" />Indeterminate
<rhx-progress-bar rhx-indeterminate="true" rhx-label="Loading" />htmx Integration
<!-- Start button -->
<rhx-button rhx-variant="brand"
hx-post="/Docs/Components/ProgressBar?handler=StartTask"
hx-target="#progress-container"
hx-swap="innerHTML">
Start Task
</rhx-button>
<!-- Server returns a polling element: -->
<div hx-get="/Docs/Components/ProgressBar?handler=PollProgress&taskId=abc123"
hx-trigger="every 500ms"
hx-target="#progress-container"
hx-swap="innerHTML">
<rhx-progress-bar rhx-value="0" rhx-label="Processing" />
</div>Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-value |
int |
0 |
Current progress value (0-100) |
rhx-label |
string |
- |
Accessible label for the progress bar |
rhx-indeterminate |
bool |
false |
Shows an indeterminate animation |
Accessibility
- Renders with
role="progressbar"for assistive technology recognition. - Determinate bars set
aria-valuenow,aria-valuemin="0", andaria-valuemax="100". - The
rhx-labelproperty maps toaria-labelfor a meaningful accessible name. - Indeterminate mode removes
aria-valuenowto indicate unknown progress.