> 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/experience-cloud/experience-components/ax-progress-circle.md).

# AX - Progress Circle

## Overview

**AX - Progress Circle** is an Experience Cloud component that displays completion percentage or progress metrics in a circular gauge format on Experience Sites pages.

Use it to show portal users their progress toward goals, completion status, percentage achieved, or any numeric metric from Salesforce data in a compact, visual format. Configure the progress value, colors, size, and labels in Experience Builder.

Perfect for dashboard KPIs, goal completion displays, profile progress indicators, task completion rates, or anywhere your portal needs space-efficient circular progress visualization.

## Settings

{% tabs %}
{% tab title="🎛️ Properties" %}

| Name               | Description                                                                                            |
| ------------------ | ------------------------------------------------------------------------------------------------------ |
| **Label**          | A descriptive text accompanying the progress circle.                                                   |
| **Value**          | A numerical representation of the progress, typically a percentage..                                   |
| **Show Value**     | Toggles the display of the numerical value inside the progress circle.                                 |
| **Size**           | Adjusts the overall size of the progress circle. Options may include small, medium, or large.          |
| **Thickness**      | Sets the thickness of the progress bar in the circle, allowing for a more prominent or subtle display. |
| **Direction**      | Determines the direction in which the progress bar fills (e.g., clockwise or counterclockwise).        |
| **Title**          | An additional text element is typically used for a more detailed description or title.                 |
| **Title Position** | Specifies the placement of the title with the progress circle (e.g., top, bottom).                     |
| {% endtab %}       |                                                                                                        |

{% tab title="🎨 Styling" %}

| Name          | Description                                                  |
| ------------- | ------------------------------------------------------------ |
| **Label**     | Grey color, normal font style, medium weight.                |
| **Value**     | Blue color, bold weight for emphasis.                        |
| **Bar**       | Blue color for the progress bar, light grey background.      |
| **Title**     | Black color, normal style, bold weight, limited to one line. |
| {% endtab %}  |                                                              |
| {% endtabs %} |                                                              |


---

# 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/experience-cloud/experience-components/ax-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.