RingProgress
A circular progress ring for displaying determinate completion percentage.
When to Use
- Show a compact completion percentage inline — e.g. in cards, list rows, or stat tiles.
- Pair with a custom centre label to display a value other than the default percentage.
- Use instead of the full
Gaugewhen you need a simpler ring with no variant complexity.
25%
50%
75%
100%
65%
65%
65%
65%
70%
70%
70%
70%
82
score
60%
60%
Rounded (default)
60%
Square
60%
API Reference
RingProgress
| Property | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | Progress value (0–100). |
| Size | int | 64 | Diameter of the ring in pixels. |
| Thickness | int | 6 | Ring stroke thickness in pixels. |
| Color | string | "primary" | Theme token for the value arc. |
| TrackColor | string | "muted" | Theme token for the background track. |
| ShowLabel | bool | false | Show the percentage value in the centre. |
| LabelContent | RenderFragment? | null | Custom centre content. Overrides ShowLabel when set. |
| RoundedCaps | bool | true | Use round stroke-linecap on the value arc. |