> 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-circle.md).

# Progress Circle

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

The Progress Circle displays a circular gauge that fills as a value approaches its total. It is a compact, visually distinct alternative to a horizontal bar — well-suited for dashboards, scorecards, and KPI displays.

***

## Overview

Use the Progress Circle when a single metric needs to stand out. The value can come directly from a Salesforce field, be calculated from a formula, or be aggregated from a query. An optional label and title provide context above and below the gauge.

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

***

## Configuration

To configure it, click the component on the Flow screen. The Edit Progress Circle 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**            | Short text displayed after the value inside the circle (e.g., "pts", "%"). Helps users understand what the number represents. |
| **Variant**          | **Standard** (default) — shows the value inside the circle. **Value Hidden** — hides the numeric value.                       |
| **Size**             | Overall diameter of the circle: X-Small, Small, **Medium** (default), Large, or X-Large.                                      |
| **Thickness**        | Width of the ring: X-Small, Small, **Medium** (default), Large, or X-Large.                                                   |
| **Direction**        | Which way the ring fills from the top: **Fill** (default, clockwise) or **Drain** (counterclockwise).                         |
| **Alternative Text** | Accessible text description of the progress circle, read by assistive technologies.                                           |

### Value

The **Value** group controls what the circle displays.

| Setting   | What It Does                                                                                                            |
| --------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Value** | The current progress value. Connect to a Salesforce field, a flow variable, or use a Query to aggregate across records. |
| **Total** | The value that represents 100% completion (default: 100). Set a query here to calculate the total dynamically.          |

> **Example (Mapped):** Link the circle to a "Customer Satisfaction Score" field to show the current score at a glance.
>
> **Example (Query):** Use AVG on a rating field across all reviews for a product to display an aggregate score.

### Title

The **Title** group adds a text label displayed above or below the circle.

| Setting            | What It Does                                              |
| ------------------ | --------------------------------------------------------- |
| **Title**          | Text displayed at the top or bottom of the circle.        |
| **Title Position** | Where the title appears: **Top** or **Bottom** (default). |

***

## Styling

The Style tab provides layout and element-level customization:

{% tabs %}
{% tab title="Margin" %}
Controls the outer spacing around the Progress Circle.

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

{% tab title="Padding" %}
Controls the inner spacing between the circle and its outer edge.

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

{% tab title="Border" %}
Customizes the border around the Progress Circle.

* **Color / Size / Style / Radius:** Set the border color, thickness, line style, and corner rounding.
  {% endtab %}

{% tab title="Circle" %}
Styles the circular progress track.

* **Bar Color:** The filled portion indicating progress.
* **Completed Bar Color:** The filled portion when progress is complete.
* **Background Color:** The unfilled portion of the circle.
  {% endtab %}

{% tab title="Value" %}
Styles the numeric value shown inside the circle.

* **Color / Font Style / Font Weight:** Value text color and typography.
  {% endtab %}

{% tab title="Title" %}
Styles the title text shown with the Progress Circle.

* **Color / Font Style / Font Weight:** Title text color and typography.
* **Line Clamp:** Limit the title to a set number of lines.
  {% endtab %}

{% tab title="Label" %}
Styles the label text shown with the Progress Circle.

* **Color / Font Style / Font Weight:** Label text color and typography.
  {% endtab %}
  {% endtabs %}

***

## Output Variables

The Progress Circle 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 Circle 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 user completes a quiz, store the **Percentage** in a flow variable and display it in a later screen — "You scored {!quizScore}% — great work!"


---

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