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
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.
Pick a shape to see it applied live.
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
ProgressVariant
ProgressShape
ProgressAnimation
IsIndeterminate
IsIndeterminate = false
IsIndeterminate = true
Striped
Striped = false
Striped = true
API Reference
Progress
CircularProgress
StepsProgress
Styling hooks (data-state)
Progress exposes a data-state
of loading,
complete, or
indeterminate, plus
data-value and
data-max, so you can restyle the bar at
completion (data-[state=complete]:…) straight from CSS.