> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/progress-bar.md).

# Progress Bar

<figure><img src="/files/jLZMdeGOWi6zezKiHs3c" alt="" width="375"><figcaption></figcaption></figure>

The Progress Bar displays a visual indicator of completion toward a goal. It supports horizontal and vertical orientations, multiple color themes, an optional avatar, and a pin that marks the current value.

***

## Overview

Use the Progress Bar to show how far along a process is — a sales quota, a project milestone, or a customer satisfaction score. The value can be mapped directly from a Salesforce field, calculated with a formula, or aggregated from a query.

<figure><img src="/files/YNDEQM2MkCoOY1R0GBiY" alt=""><figcaption></figcaption></figure>

***

## Configuration

To configure it, click the component on the Flow screen. The Edit Progress Bar Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Properties

| Setting         | What It Does                                                                                                                      |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Label**       | Text displayed above or beside the progress bar to describe what is being measured.                                               |
| **Orientation** | Choose **Horizontal** (default) or **Vertical** for the bar's direction.                                                          |
| **Variant**     | **Base** (default) — a standard flat bar. **Rounded** — a bar with rounded ends.                                                  |
| **Theme**       | Sets the color scheme: Base, Success, Inverse, Alt Inverse, Warning, Info, Error, or Offline. Can be overridden in the Style tab. |
| **Size**        | Controls the bar's width relative to its container: X-Small, Small, Medium, Large, or **Full** (default, fills available space).  |
| **Thickness**   | Sets the bar's height: X-Small, Small, **Medium** (default), or Large.                                                            |
| **Textured**    | When enabled, displays a texture pattern on the bar's background.                                                                 |

### Value

The **Value** group controls what the bar displays and how the current progress is calculated.

| Setting            | What It Does                                                                                                                               |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **Value**          | The current progress value. Connect to a Salesforce field, a flow variable, or set a Query to aggregate across records.                    |
| **Total**          | The value that represents 100% completion (default: 100). Set a query here to calculate the total dynamically.                             |
| **Show Value**     | When enabled, displays the numeric value alongside the bar.                                                                                |
| **Value Position** | Where the value is shown: Left, Right, Top Right (default), Top Left, Bottom Right, or Bottom Left. Requires **Show Value** to be enabled. |
| **Value Prefix**   | Text displayed before the value (e.g., "$"). Requires **Show Value** to be enabled.                                                        |
| **Value Suffix**   | Text displayed after the value (e.g., "%", "pts"). Requires **Show Value** to be enabled.                                                  |

> **Example (Mapped):** Link the bar directly to an "Amount Closed" field to show a rep's progress toward quota.
>
> **Example (Query):** Use AVG on a "Percent Complete" field across all Opportunities in a stage to show overall pipeline health.

<figure><img src="/files/RvZRQbYcdCn5j2bri6g6" alt=""><figcaption><p>Base vs Rounded Variant</p></figcaption></figure>

### Avatar

The **Avatar** group adds an image, icon, or initials alongside the bar.

| Setting           | What It Does                                                        |
| ----------------- | ------------------------------------------------------------------- |
| **Initials**      | Text displayed inside the avatar when no image or icon is provided. |
| **Fallback Icon** | Icon to show if the image fails to load.                            |
| **Image (Src)**   | Upload a custom image to display as the avatar.                     |
| **Variant**       | Avatar shape: Circle or Square.                                     |
| **Size**          | Size of the avatar.                                                 |
| **Position**      | Where the avatar appears: Left or Right of the bar.                 |

<figure><img src="/files/kHTtPndD8mIpPwQhxkDJ" alt=""><figcaption><p>Progress Bar with Avatar</p></figcaption></figure>

### Pin

The **Pin** group adds a marker on the bar to highlight the current value position.

| Setting      | What It Does                                                                                      |
| ------------ | ------------------------------------------------------------------------------------------------- |
| **Show Pin** | When enabled, displays a pin at the current value position.                                       |
| **Type**     | Shape of the pin: **Circle** or **Rectangle** (default). Only shown when **Show Pin** is enabled. |
| **Position** | For vertical bars, sets whether the pin appears on the **Left** or **Right** side of the bar.     |

<figure><img src="/files/IEFkPh6BWAtg8XPI81u1" alt=""><figcaption></figcaption></figure>

***

## Styling

The **Style** tab gives you fine-grained control over the progress bar's appearance. Configure it from the **Style** tab of the Edit Progress Bar panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the progress bar, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the progress bar's content and its edges.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the progress bar's dimensions.

* **Width / Height:** Set fixed dimensions.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the progress bar.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Label" %}
Styles the label text.

* **Color:** Set the label text color.
* **Font Size / Font Style / Font Weight:** Control the label typography.
* **Line Clamp:** Limit the label to a maximum number of lines.
  {% endtab %}

{% tab title="Value" %}
Styles the displayed numeric value.

* **Color:** Set the value text color.
* **Font Size / Font Style / Font Weight:** Control the value typography.
  {% endtab %}

{% tab title="Avatar" %}
Styles the optional avatar shown on the progress bar.

* **Image Object Fit:** Control how the avatar image fills its space.
  {% endtab %}

{% tab title="Pin" %}
Styles the value pin marker.

* **Background Color / Text Color:** Set the pin colors.
* **Font Style / Font Weight:** Control the pin typography.
  {% endtab %}

{% tab title="Bar" %}
Styles the bar itself. Colors are set per variant (base, alt-inverse, error, info, inverse, offline, success, warning).

* **Color:** Set the color of the unfilled portion.
* **Completed Color:** Set the fill color of the completed portion. Gradients are supported — choose the gradient angle and color stops with percentage positions (e.g. red at 0%, yellow at 50%, green at 100%).
  {% endtab %}
  {% endtabs %}

***

## Output Variables

The Progress Bar exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Progress Bar component, and pick the output variable you need.

### Others

| Output variable | Type    | What it returns                                                     |
| --------------- | ------- | ------------------------------------------------------------------- |
| **Percentage**  | Integer | The current progress value expressed as a number between 0 and 100. |

> **Example:** After a screen where the bar visualises a sales quota, store **Percentage** in a flow variable and use it in a decision element to route reps who have reached 100% to a congratulations screen.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/progress-bar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.