# Progress Circle

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

***

## Changing the Properties

### What Determines Your Progress Circle's Value?

You have several options for how the progress circle displays its progress:

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

* **Mapped:** Directly link the progress circle to a single Salesforce field or variable. This is ideal for straightforward scenarios where a single value represents progress (e.g., percentage complete, number of tasks finished).
* **Advanced (Formula):** Create a formula that calculates the progress value by combining multiple fields or variables. This offers more flexibility, allowing you to factor in various criteria (e.g., average of numerous scores, weighted progress across different tasks).
* **Query:** Run a Salesforce query to fetch the progress value directly from your data. This is useful for aggregating data across records (e.g., showing overall project completion based on the status of individual tasks). You can use functions like AVG or MAX within your query.

### Advanced option

#### Thickness

You can set the Progress Circle Thickness with values like: `x-small`, `small`, `medium`, `large` and `x-large`.

#### Direction

Controls the way the color flows from the top of the ring, either clockwise or counterclockwise.

***

## Adding Interactions

No interactions are available.

***

## Styling the Progress Circle

Progress Circles are a great way to visually represent a task or process's completion. Avonni provides comprehensive styling options to help you tailor the appearance.

{% 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 %}


---

# Agent Instructions: 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=<question>
```

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.