> 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
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.
***
## 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). |
### 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="Layout and Spacing" %}
* **Margin:** Control the spacing around the Progress Circle to position it correctly within its surrounding elements.
* **Padding:** Adjust the space between the progress bar and the outer edge of the circle to fine-tune the visual balance.
* **Border:** Add and customize a border around the Progress Circle to give it more visual definition. Modify the border's style (solid, dashed, etc.), color, and thickness.
{% endtab %}
{% tab title="Component Elements" %}
* **Bar:** Customize the appearance of the progress bar itself. You can change:
* **Bar color:** Set the color of the filled portion of the circle, indicating the level of progress.
* **Background color:** Set the color of the unfilled portion of the circle.
* **Value:** If you choose to display the numerical progress value within the circle, you can customize its appearance including font, size, and color.
* **Title:** Style the title text that appears above the Progress Circle. Adjust the font, size, color, and alignment to match your design.
* **Label:** If you include a label below the Progress Circle to provide additional context, you can style its text properties (font, size, color).
{% 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:
```
GET https://docs.avonnicomponents.com/flow/flow-components/progress-circle.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.