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