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