# RingProgress

Source: https://lumeo.nativ.sh/components/ring-progress

# 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 `Gauge` when you need a simpler ring with no variant complexity.

Preview Code

Default

25%

50%

75%

100%

Copy Code

Preview Code

Sizes

65%

65%

65%

65%

Copy Code

Preview Code

Colors

70%

70%

70%

70%

Copy Code

Preview Code

Custom Label

82

score

Copy Code

Preview Code

Interactive

60%

\-10 60% +10

Copy Code

Preview Code

Square Caps

Rounded (default)

60%

Square

60%

Copy Code

## 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.

## Related Components

-   [Gauge](/components/gauge) — Full-featured gauge with Radial, Arc, and Linear variants plus threshold colouring.
-   [Progress](/components/progress) — Linear and circular progress bars with variants and indeterminate support.
-   [Spinner](/components/spinner) — Indeterminate loading indicator.