Overview
The <x-aura::radial-progress> component renders a circular progress ring using SVG. It supports values from 0 to 100, multiple size and color variants, configurable stroke thickness, and an optional centered label showing the percentage.
Basic Usage
65%
<x-aura::radial-progress :value="65" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value |
int|float |
0 |
Current progress value (0-100). |
size |
string |
'md' |
Circle size: sm, md, lg, xl. |
color |
string |
'primary' |
Color variant: primary, success, danger, warning, info. |
showLabel |
bool |
true |
Show the percentage label in the center. |
thickness |
int |
4 |
Stroke width of the progress ring in pixels. |
Variants / Examples
Color Variants
80%
65%
45%
25%
90%
<x-aura::radial-progress :value="80" color="primary" />
<x-aura::radial-progress :value="65" color="success" />
<x-aura::radial-progress :value="45" color="warning" />
<x-aura::radial-progress :value="25" color="danger" />
<x-aura::radial-progress :value="90" color="info" />
Size Variants
70%
70%
70%
70%
<x-aura::radial-progress :value="70" size="sm" />
<x-aura::radial-progress :value="70" size="md" />
<x-aura::radial-progress :value="70" size="lg" />
<x-aura::radial-progress :value="70" size="xl" />
Without Label
<x-aura::radial-progress :value="50" :showLabel="false" />
<x-aura::radial-progress :value="75" :showLabel="false" />
Custom Thickness
60%
60%
60%
<x-aura::radial-progress :value="60" :thickness="2" size="lg" />
<x-aura::radial-progress :value="60" :thickness="6" size="lg" />
<x-aura::radial-progress :value="60" :thickness="10" size="lg" />
Accessibility
- The component uses
role="progressbar"witharia-valuenow,aria-valuemin, andaria-valuemaxattributes. - The percentage label provides a visual indication that supplements the ARIA attributes.
- Color is not the sole indicator of progress; the numeric label conveys the value.