# Progress

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

# Progress

Displays a progress bar indicating completion status.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

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

Preview Code

Default

25%

50%

75%

Preview Code

Variants

Default

Success

Warning

Destructive

Preview Code

Interactive

\-10 50% +10

Preview Code

Indeterminate

Preview Code

With Label

65%

Uploading...

90%

Preview Code

Animated Stripes

Preview Code

Indeterminate Sweep

Use when the operation's duration is unknown. A narrow bright segment slides continuously from left to right.

Preview Code

Glow Pulse

The fill bar breathes — suggests "active / in progress" without overwhelming motion.

Preview Code

Variant — interactive

Pick a variant to see it applied live.

DefaultSuccessWarningDestructive

65%

Preview Code

Shape — interactive

Pick a shape to see it applied live.

Linear Circular

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

## Related Components

-   [Spinner](/components/spinner) — Use for indeterminate loading states where a circular indicator is more appropriate
-   [Skeleton](/components/skeleton) — Use to show placeholder shapes while content is loading