Progress
Displays a progress bar indicating completion status.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Progress />
When to Use
- Show upload or download progress with a percentage bar
- Indicate loading states when the duration is known or estimable
- Visualize step completion in multi-step workflows or wizards
- Display capacity usage such as storage, quotas, or limits
- Use the indeterminate variant for operations with unknown duration
25%
50%
75%
Default
Success
Warning
Destructive
50%
65%
Uploading...
90%
Use when the operation's duration is unknown. A narrow bright segment slides continuously from left to right.
The fill bar breathes — suggests "active / in progress" without overwhelming motion.
Pick a variant to see it applied live.
65%
Pick a shape to see it applied live.
72%
Keyboard Interactions
| Key | Action |
|---|---|
Progress is a display-only component and has no keyboard interactions. | |
Parameter Coverage
ProgressVariant, ProgressShape, ProgressAnimation, and value thresholds.
Value thresholds
0%
25%
50%
75%
100%
ProgressVariant
Default
Success
Warning
Destructive
ProgressShape
Linear
Circular
ProgressAnimation
None
Stripe
Indeterminate
Glow
IsIndeterminate
IsIndeterminate = false
IsIndeterminate = true
Striped
Striped = false
Striped = true
API Reference
Progress
| Property | Type | Default | Description |
|---|---|---|---|
| Value | int | 0 | Current progress value. Rendered as a percentage relative to Max. |
| Max | int | 100 | Maximum value for the progress bar. |
| Variant | ProgressVariant | Default | Color variant. Values: Default, Success, Warning, Destructive. |
| IsIndeterminate | bool | false | When true, shows an animated indeterminate state. |
| ShowLabel | bool | false | When true, displays a percentage or custom label. |
| Label | string? | null | Custom label text when ShowLabel is true. |
| Animation | ProgressAnimation | None | Opt-in fill animation. Values: None (default), Stripe (diagonal stripes sweep), Indeterminate (narrow segment slides continuously — Value ignored), Glow (fill bar box-shadow pulses). Linear shape only. |
| Animated | bool | true | Enables CSS transitions on value changes. |
| Shape | ProgressShape | Linear | Progress shape. Values: Linear, Circular. |
| Striped | bool | false | Renders the fill with a diagonal striped pattern. |
| StrokeWidth | int | 8 | Thickness of the progress bar fill, in pixels. |
| ShowValue | bool | false | Displays the numeric value inside the bar. |
| GradientFrom | string? | null | Optional starting color for a gradient fill (CSS color). |
| GradientTo | string? | null | Optional ending color for a gradient fill (CSS color). |
| Size | ProgressSize | Default | Height of the bar. Values: Sm, Default, Lg. |
CircularProgress
| Property | Type | Default | Description |
|---|---|---|---|
| Value | int | 0 | Current progress value. |
| Max | int | 100 | Maximum value. |
| Size | int | 48 | Diameter of the circle, in pixels. |
| StrokeWidth | int | 4 | Stroke width of the circular arc, in pixels. |
| ShowValue | bool | false | Renders the numeric value in the center of the circle. |
| Format | string? | "{0}%" | Format string for the displayed value. |
StepsProgress
| Property | Type | Default | Description |
|---|---|---|---|
| Steps | List<string>? | null | Labels for each step. |
| CurrentStep | int | 0 | Index of the active step. |
| Orientation | string | "horizontal" | Layout orientation. Values: "horizontal", "vertical". |