> ## 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](../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.

## Related resources

<CardGroup cols={2}>
  <Card title="UI Designer overview" icon="palette" href="../ui-designer">
    Compose screens in the UI Designer.
  </Card>

  <Card title="Dynamic and computed values" icon="function" href="../dynamic-and-computed-values">
    Bind component properties to process data.
  </Card>
</CardGroup>


## Related topics

- [FlowX.AI 5.9.0 Release Notes](/release-notes/v5.x/v5.9.0-june-2026/v5.9.0-june-2026.md)
- [FlowX.AI 5.8.0 Release Notes](/release-notes/v5.x/v5.8.0-may-2026/v5.8.0-may-2026.md)
- [Navigation areas](/5.1/docs/building-blocks/process/navigation-areas.md)
- [Navigation best practices](/5.1/docs/building-blocks/process/navigation-best-practices.md)
- [Creating a User interface](/5.1/docs/flowx-designer/managing-a-project-flow/creating-a-user-interface.md)