Components/Data display

EProgress Progress

import EUI 1.0

Examples

Percentages, color thresholds, stripes and indeterminate progress

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 20 width: parent.width EProgress { width: Math.min(500, parent.width) height: 20 percentage: 68 showText: true striped: true stripedFlow: true color: [{ color: "#E6A23C", percentage: 30 }, { color: "#409EFF", percentage: 70 }, { color: "#67C23A", percentage: 100 }] } EProgress { width: Math.min(500, parent.width) height: 10 indeterminate: true duration: 1800 } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Progress

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width EProgress { value: 0.25 width: Math.min(parent.width, 560) } EProgress { value: 0.5 styleType: EStyle.Warning width: Math.min(parent.width, 560) } EProgress { value: 0.76 styleType: EStyle.Success width: Math.min(parent.width, 560) color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Success) } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

colorvar

Custom color; a transparent value usually selects theme or semantic colors.

DefaultDynamic binding

contentalias

Content slot; declare QML child objects directly inside the component.

DefaultAlias: customText.data

durationint

Animation or display duration in milliseconds; the component binding identifies its use.

Default3000

enabledbool

Allow interaction; false disables the control.

Defaulttrue

formatvar

Display format: date/time pattern, progress callback or countdown time placeholders.

Defaultnull

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

indeterminatebool

Show indeterminate progress or read partial selection state.

Defaultfalse

percentagevar

Percentage progress from 0 to 100, taking precedence over value when set.

0–100
undefined: use value

Defaultundefined

showTextbool

Show progress or rating text.

Defaultfalse

statusstring

Semantic progress state; an empty value is the normal state.

"" / "success"
"warning" / "exception"

Default""

stripedbool

Show progress bar stripes.

Defaultfalse

stripedFlowbool

Animate progress bar stripes.

Defaultfalse

strokeLinecapstring

Shape of the progress stroke endpoints.

"round" / "butt"

Default"round"

strokeWidthint

Border, divider or progress track width in pixels.

Default6

styleTypeint

Semantic color style.

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

DefaultEStyle.Primary

textInsidebool

Place progress text inside the progress bar.

Defaultfalse

valuevar

Normalized progress from 0 to 1; a nonnegative percentage takes precedence.

0–1

Default0

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

displayTextstringRead only

Display text after formatting, progress or badge rules.

DefaultComputed at runtime

effectiveColorcolorRead only

Resolved color from the theme, current state and custom palette.

DefaultComputed at runtime

effectiveStyleintRead only

Resolved EStyle palette for the progress status.

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

DefaultComputed at runtime

normalizedValuerealRead only

Progress normalized to the valid range.

0–1

DefaultComputed at runtime