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

The Progress Bar normalises `(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:

```javascript theme={"system"}
${application.upload.percentComplete}
```

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

```javascript theme={"system"}
${application.flow.currentStep} * 25
```

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>