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