Progress

The EProgressLinear component communicates the status of loading, synchronization, and processing tasks in a compact linear track. Use determinate progress when the application knows the completed amount, and indeterminate progress when it can only confirm that work is active.

Usage

Configure the common progress props and inspect the generated markup. value controls the filled track in determinate mode, while indeterminate replaces it with continuous motion.

48%

48
primary
6

Progress modes

Choose the mode from the information your task can report. Determinate progress represents a measurable value from 0 to 100; indeterminate progress communicates activity without suggesting an unavailable completion estimate.

Determinate

72% of files processed

Indeterminate

Preparing workspace data

Color and thickness

Use color to align the bar with its context and height to fit compact controls or prominent task surfaces. useContrastColor resolves the contrast token associated with the selected color.

3px · primary

6px · secondary

8px · contrast

Values and lifecycle

Update value from real task state. The component normalizes invalid numeric input to 0 and clamps finite values to the 0–100 range, but the data source should still provide meaningful progress.

Current progress35%

Composition patterns

Pair the bar with a task label and a visible status so users know what is running and what completion means. A report export is determinate when processed items are measurable and indeterminate while the server prepares work without totals.

Quarterly report export

Ready to start the report export

0%

Accessibility

The component renders role="progressbar" with a range from 0 to 100. Determinate mode exposes aria-valuenow; indeterminate mode omits it. Give the bar an accessible name and mark the related region busy while work is active.

The surrounding region reports its busy state while the export is active.

Usage guidelines

Keep progress honest, contextual, and readable across task states.

Do

  • Use determinate mode when progress comes from measurable work.
  • Place a visible task label or status near important progress.
  • Use color and thickness that remain readable on the current surface.

Don't

  • Invent percentages for operations that cannot report completion.
  • Leave indeterminate progress running after the task has finished.
  • Rely on animation or color alone to communicate task status.

API reference

Reference the verified public props for EProgressLinear. The component does not emit public events or expose public slots.

EProgressLinear props

PropertyTypeDefault
indeterminatebooleanfalse

Uses continuous animation when the operation cannot report an exact completion percentage.

valuenumber0

Sets determinate progress. Values are normalized to the 0–100 range.

heightstring | number4

Sets the bar thickness. Numeric values are normalized to pixels; strings accept valid CSS sizes.

colorstringundefined

Resolves the progress color through the framework color system.

useContrastColorbooleanfalse

Uses the contrast token associated with color instead of its base value.

Events and slots

EProgressLinear does not emit public events and does not expose public slots.