Progress bar

Overview

Use a Progress Bar when the user needs a quick visual answer to “how far along?” — for example, a multi-step onboarding flow, a long-running document upload, an order-fulfilment status, or a goal-tracking dashboard. The Progress Bar is read-only. Bind its value to a process field or computed expression and it updates as the data changes.

Properties

Property	Type	Description
Progress	Number (0–1) / expression	The current progress, as a value between `0` and `1` (for example, `0.25` fills the bar to 25%). Bind to a process data key or use a computed expression.
Visibility	Expression	JavaScript expression that hides the bar when truthy.
Theme overrides	Object	Override `color`, `backgroundColor`, `height`, `borderRadius` for this instance only.

Process data binding

To drive the bar from process data, set Progress to a process data key that holds a value between 0 and 1:

${application.upload.fractionComplete}

For derived values, use a computed expression — for example, mapping a step index to a fraction in a 4-step flow:

${application.flow.currentStep} / 4

See Dynamic and computed values for the full expression syntax.

Theme configuration

Defaults from the platform theme:

Token	Default	Description
`color`	`color@primary#500`	Fill colour of the completed portion.
`backgroundColor`	`color@primary#100`	Track colour for the unfilled portion.
`height`	`8px`	Bar thickness.
`borderRadius`	`4px`	Corner radius applied to both fill and track.
`borderColor`	`color@shades#0`	Outline colour. Hidden by default via `borderWidth: 0`.
`borderWidth`	`0px`	Set to `1` or higher to display the outline.

To override globally, edit Theme → Components → Progress Bar in the Designer.

UI Designer overview

Compose screens in the UI Designer.

Dynamic and computed values

Bind component properties to process data.

Last modified on June 29, 2026

Getting Started

Concepts

FlowX.AI Designer

Building projects

Building blocks

Platform deep dive

API reference

Progress bar

Overview

Properties

Process data binding

Theme configuration

UI Designer overview

Dynamic and computed values

​Overview

​Properties

​Process data binding

​Theme configuration

​Related resources

UI Designer overview

Dynamic and computed values

Overview

Properties

Process data binding

Theme configuration

Related resources