Lumeo

RingProgress

A circular progress ring for displaying determinate completion percentage.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<RingProgress />

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.
25%
50%
75%
100%
65%
65%
65%
65%
70%
70%
70%
70%
82
score
60%
60%
70%
70%
70%

Rounded (default)

60%

Square

60%

API Reference

RingProgress

  • Gauge — Full-featured gauge with Radial, Arc, and Linear variants plus threshold colouring.
  • Progress — Linear and circular progress bars with variants and indeterminate support.
  • Spinner — Indeterminate loading indicator.