Progress Ring
Circular progress indicator with customizable stroke width.
<rhx-progress-ring>
Examples
Various Values
<rhx-progress-ring rhx-value="0" rhx-label="Not started" />
<rhx-progress-ring rhx-value="25" rhx-label="Quarter" />
<rhx-progress-ring rhx-value="65" rhx-label="Upload" />
<rhx-progress-ring rhx-value="100" rhx-label="Complete" />Custom Stroke Widths
<rhx-progress-ring rhx-value="75" rhx-track-width="2" rhx-indicator-width="2" />
<rhx-progress-ring rhx-value="75" rhx-track-width="4" rhx-indicator-width="4" />
<rhx-progress-ring rhx-value="75" rhx-track-width="3" rhx-indicator-width="5" />Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-value |
int |
0 |
Current progress value (0-100) |
rhx-label |
string |
- |
Accessible label for the progress ring |
rhx-track-width |
int |
3 |
Width of the background track stroke |
rhx-indicator-width |
int |
3 |
Width of the progress indicator stroke |
Accessibility
- Renders with
role="progressbar"for assistive technology recognition. - Sets
aria-valuenow,aria-valuemin="0", andaria-valuemax="100"on the ring element. - SVG-based rendering with
aria-labelderived fromrhx-labelfor a meaningful accessible name.