> 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-bar.md).

# AX - Progress Bar

## Overview

**AX - Progress Bar** is an Experience Cloud component that displays a visual progress indicator showing completion percentage or goal attainment on Experience Sites pages.

Use it to show portal users their progress toward goals, completion status of multi-step processes, percentage of requirements met, or any numeric progress metric from Salesforce data. Configure the progress value, labels, colors, and styling in Experience Builder.

Perfect for onboarding completion, goal tracking, profile completeness, training progress, or anywhere portal users need visual feedback on their advancement toward a target.

## Configuration

### Properties

**Label** is the text displayed to identify the purpose of the progress bar, giving users a clear understanding of what progress it indicates.

**Value** is a numerical value representing the current progress — the percentage or fraction of the task or process that has been completed. **Total** is the number that must be reached for 100% progress (defaults to 100).

**Value Label** is the label shown next to the value, often as a percentage or fraction, giving a textual representation of the progress. **Value Position** places it relative to the bar: `Top Right`, `Left`, `Right`, `Top Left`, `Bottom Right`, or `Bottom Left`.

**Size** sets the thickness of the progress bar: `Full`, `X-Small`, `Small`, `Medium`, or `Large`.

**Orientation** sets the direction in which the bar fills — `Horizontal` or `Vertical` — aligning it with the flow of surrounding content.

**Show Value** toggles the display of the progress value label, letting you present numerical progress directly on the bar or keep the design clean and minimalistic.

**Variant** sets the shape of the progress bar: `Base` for a straight bar or `Circular` for a round indicator.

**Textured** adds a textured effect to the progress bar for a more dynamic, tactile appearance.

**Theme** applies a predefined color theme that indicates the nature or status of the progress: `Base`, `Alt Inverse`, `Error`, `Info`, `Inverse`, `Offline`, `Success`, or `Warning` — for instance, `Success` for completed tasks or `Warning` for pending actions.

**Thickness** adjusts the progress bar's thickness: `Medium`, `X-Small`, `Small`, or `Large`.

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

## Styling

{% tabs %}
{% tab title="Margin" %}
Controls the outer spacing around the progress bar.
{% endtab %}

{% tab title="Padding" %}
Controls the inner spacing of the progress bar.
{% endtab %}

{% tab title="Label" %}

* **Color / Font Size / Font Style / Font Weight:** Style the label text.
  {% endtab %}

{% tab title="Value" %}

* **Color / Font Size / Font Style / Font Weight:** Style the value text.
  {% endtab %}

{% tab title="Theme Colors" %}
Each theme (**Base**, **Alt Inverse**, **Error**, **Info**, **Inverse**, **Offline**, **Success**, **Warning**) exposes:

* **Color:** The track color.
* **Completed Color:** The color of the filled/completed portion.
  {% 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-bar.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.