Spinner
Loading spinner with size variants and htmx indicator support.
<rhx-spinner>
Examples
Sizes
<rhx-spinner rhx-size="small" />
<rhx-spinner />
<rhx-spinner rhx-size="large" />
<rhx-spinner rhx-size="3rem" rhx-label="Custom size" />htmx Indicator
(Spinner with class="htmx-indicator" for use with hx-indicator)
<rhx-spinner id="my-indicator" class="htmx-indicator" />
<!-- Use with hx-indicator on a trigger element -->
<rhx-button hx-get="/api/data"
hx-indicator="#my-indicator">
Load Data
</rhx-button>Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-size |
string |
medium |
Spinner size: small, medium, large, or any CSS value |
rhx-label |
string |
Loading |
Accessible label for the spinner |
Accessibility
- Renders with
role="status"so screen readers announce the loading state. - The
rhx-labelproperty maps toaria-label(defaults to "Loading"). - Animation respects
prefers-reduced-motionmedia query.