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

## Configuration

### Properties

**Label** is descriptive text accompanying the progress circle.

**Value** is a numerical representation of the progress, typically a percentage. **Total** is the number that must be reached for 100% progress (defaults to 100).

**Show Value** toggles the display of the numerical value inside the progress circle.

**Size** adjusts the overall size of the progress circle (small, medium, or large).

**Thickness** sets the thickness of the ring, allowing for a more prominent or subtle display.

**Direction** determines the direction in which the ring fills (fill or drain).

**Title** is an additional text element used for a more detailed description or title. **Title Position** specifies its placement relative to the circle (top or bottom).

**Alternative Text** provides accessible text describing the progress circle for screen readers.

## Styling

{% tabs %}
{% tab title="Label" %}
Grey color, normal font style, medium weight.
{% endtab %}

{% tab title="Value" %}
Blue color, bold weight for emphasis.
{% endtab %}

{% tab title="Bar" %}
Blue color for the progress bar, light grey background.
{% endtab %}

{% tab title="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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-progress-circle.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.