Documentation Index
Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
Use this file to discover all available pages before exploring further.
Available starting with FlowX.AI 5.8.0The Progress Bar shows how far a value has advanced between a minimum and a maximum, as a horizontal fill against a track.
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 |
|---|---|---|
| Value | Number / expression | The current progress value. Bind to a process data key or use a computed expression. |
| Min | Number | Lower bound of the range. Defaults to 0. |
| Max | Number | Upper bound of the range. Defaults to 100. |
| Visibility | Expression | JavaScript expression that hides the bar when truthy. |
| Theme overrides | Object | Override color, backgroundColor, height, borderRadius for this instance only. |
(value - min) / (max - min) into the visual fill, so values outside the range are clamped.
Process data binding
To drive the bar from process data, set Value to a process data key: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. |
Related resources
UI Designer overview
Compose screens in the UI Designer.
Dynamic and computed values
Bind component properties to process data.