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

# Progress bar

> A UI component for visualizing progress or completion state on a screen.

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

```javascript theme={"dark"}
${application.upload.fractionComplete}
```

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

```javascript theme={"dark"}
${application.flow.currentStep} / 4
```

See [Dynamic and computed values](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/dynamic-and-computed-values.md) 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.

## Related resources

> [card] [UI Designer overview](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md)
>
> Compose screens in the UI Designer.

> [card] [Dynamic and computed values](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/dynamic-and-computed-values.md)
>
> Bind component properties to process data.


## Related topics

- [UI Designer](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md)
- [FlowX.AI 5.9.0 Release Notes](https://docs.flowx.ai/release-notes/v5.x/v5.9.0-june-2026/v5.9.0-june-2026.md)
- [Chat component](https://docs.flowx.ai/6.x/ai-platform/chat-component.md)
- [Assessments](https://docs.flowx.ai/6.x/observatory/governance/assessments.md)
- [FlowX.AI 5.8.0 Release Notes](https://docs.flowx.ai/release-notes/v5.x/v5.8.0-may-2026/v5.8.0-may-2026.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.